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内 容 拓 要 


本 书 以 Ct++ 和 OpenGL 作 为 工具 ， 教 授 计 算 机 图 形 学 编程 。 全 书 共 
14 章 和 3 个 附录 。 首 先 从 图 形 编程 的 基础 和 准备 工作 开始 ， 依 次 介绍 了 
OpenGL 岁 像 管 线 、 图 形 编程 数学 基础 、 管 理 3D 图 形 数 据 、 纹 理 贴 图 、 
3D 模 型 、 光 照 、 阴 影 、 天 空 和 背景 、 增 强 表面 细节 、 参 数 曲 面 、 曲 面 
细 分 、 几 何 着 色 器 ， 以 及 其 他 相关 的 图 形 编程 技术 。 附 录 分 别 介绍 了 
Windows、macOS 平 台 上 的 安装 设置 ， 以 及 Nsight 图 形 调 试 器 的 应 用 。 
本 书 每 章 最 后 配备 了 不 同形 式 的 习题 ， 供 读者 巩固 所 学 知识 。 








本 书 适 合作 为 高 等 院 校 计算 机 科学 专业 的 计算 机 图 形 编程 谍 程 的 教 
材 或 辅导 书 ， 也 适合 对 计算 机 图 形 编程 感 兴 趣 的 读者 目 学 。 
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本 书 的 主要 目标 是 用 作 计 算 机 科学 专业 本 科 OpenGL 3D 图 形 编程 相 
天 课程 的 教材 。 同时， 我 们 也 付出 了 很 大 的 努力 ， 让 本 书 成 为 一 本 无 须 
配合 诬 程 使 用 的 自学 教材 。 在 以 这 两 者 为 目标 的 前 提 下 ， 我 们 尽力 将 内 
容 解释 得 简单 而 清晰 。 本 书 中 的 所 有 代码 示例 都 已 经 尽 可 能 地 简化 ， 同 
时 没有 破坏 其 完整 性 ， 以 便 读者 可 以 直接 运行 。 





我 们 期 望 本 书 与 众 不 同 的 一 点 是 ， 新 手 ( 刚 接触 3D 图 形 编程 的 
人 ) 更 容易 学 习 。 关 于 这 个 主题 的 学 习 资 料 从 来 都 不 匮乏 ， 恰 恰 相 反 ， 
很 多 新 手 刚 入 门 的 时 候 ， 相 关 的 资料 就 扑面 而 来 了 。 我 们 刚 接 触 3D 图 
形 编程 的 时 候 ， 就 期 望 能 遇见 这 样 的 教材 一 一 一 步 步 解释 基础 概念 ， 
循序 渐进 并 有 序 地 梳理 进 阶 概念 ， 因 此 我 们 也 答 试 将 本 书 编 写成 这 样 的 
教材 。 我 们 曾 想 将 本 书 命 名 为 shader programming made easy (《 轻 松 学 
着 色 器 编程 》) ， 昌 然 我 们 并 不 认为 有 什么 方法 能 真 的 让 着 色 器 编程 变 
得 “轻松 ”， 但 我 们 希望 本 书 能 够 帮助 你 尽 可 能 地 达成 这 个 目标 。 


本 书 使 用 C++ 进 行 OpenGL 编 程 教学 。 使 用 C++ 学 习 图 形 编 程 有 以 下 
J bs 








。 由 于 OpenGL 的 原生 语言 是 C， 因 此 C++ 程 序 可 以 直接 进行 OpenGL 
函数 调用 。 

e C+t+ 编 写 的 OpenGL 应 用 程序 通常 有 着 很 好 的 性 能 

。 C++ 提供 C 语 言 所 没有 的 现代 编程 结构 〈 类 、 多 态 








=) . 





e 在 OpenGL 社 区 中 ，C++ 是 一 个 热门 选项 。 许 多 OpenGL 的 教学 资源 
有 C++ 版 本 。 


值得 一 提 的 是 ，OpenGL 也 存在 着 与 其 他 语言 绑 定 。 和 常见 的 有 
Java、C#、Python 等 ， 但 本 书 仅 关注 C++。 





本 书 与 众 不 同 的 男 一 点 是 它 有 一 个 Java 版 ， 英 文书 名 是 Computer 
Graphics Programming in OpenGL with Java. XPATH Ed FE TT 
HARAI, “EMEA EISSN ee SE, Ae. SU ART 
式 ， 其 代码 组 织 方式 也 尽 可 能 地 相似 。 诚 然 ， 使 用 C++ 或 Java 编 程 育 定 
有 着 相当 大 的 差异 。 尽 管 如 此 ， 我 们 相信 这 两 本 书 提供 了 几乎 相同 的 学 
习 路 径 ， 甚 至 可 以 让 选修 同一 门 课 的 学 生 使 用 不 同 的 语言 版 本 作为 教 
材 。 











需要 说 明 的 一 点 是 ，OpenGL 有 着 不 同 的 版 本 《〈 稍 后 简 述 ) 和 不 同 
的 变 体 。 例 如 ， 在 标准 OpenGL 〈 也 称 昌 面 OpenGL ) 之 外 ， 还 有 一 个 变 
体 叫 作 OpenGL ES. ‘Ee Aik Asi Rat (Embedded System) 的 开发 而 
定制 的 《因此 称 为 ES) 。“ 纵 入 式 系统 ”包括 手机 、 游 戏 主 机 、 汽 车 和 工 
业 控 制 系统 之 类 的 设备 。OpenGL ES 的 大 部 分 内 容 是 标准 OpenGL 的 子 
集 ， 删 除了 花 入 式 系统 通常 用 不 到 的 很 多 操作 。OpenGL ES 还 增加 了 一 
些 功 能 ， 通 常 是 特定 目标 环境 下 的 特定 功能 。 本 书 侧重 于 标准 
OpenGL. 


OpenGL 的 另 一 种 变 体 称 为 WebGL。WebGL 基 于 OpenGL ES， 它 的 
设计 目标 是 支持 在 浏览 器 中 运行 OpenGL。WebGL 人 允许 应 用 程序 通过 
JavaScript 进 行 OpenGL ES 操作 调用 ， 从 而 简单 地 将 OpenGL 图 形 能 入 标 


{EHTML (Web) 文档 中 。 大 多 数 现 代 Web 浏 览 嚣 ， 包 括 Apple Safari. 
Google Chrome. Microsoft Internet Explorer, Mozilla Firefox 和 Opera， 
支持 WebGL。 由 于 Web 编 程 超出 了 本 书 的 讨论 范围 ， 因 此 本 书 不 会 涵 瘟 
WebGL。 不 过 ， 由 于 WebGL 基 于 OpenGL ES， 而 OpenGL ES 又 基于 标 
准 OpenGL， 因 此 本 书 所 涵盖 的 大 部 分 内 容 可 以 直接 迁移 到 这 些 OpenGL 
变 体 的 学 习 中 去 。 


3D 图 形 编程 这 个 主题 通常 让 人 想起 精美 而 宏大 的 画面 。 事 实 上 ， 
许多 相关 热门 教材 中 充满 了 令 人 惊叹 的 场景 ， 很 大 程度 上 是 为 了 吸引 读 
者 翻阅 他 们 的 图 库 。 虽 然 我 们 认同 这 些 图 例 的 激励 作用 ， 但 我 们 的 目标 
古 教 学 而 非 令 人 惊叹 。 本 书 中 的 图 像 仅仅 是 示例 程序 的 输出 。 由 于 本 书 
只 是 入 门 教程 ， 其 泻 染 的 场景 应 该 无 法 让 专家 侧目 。 然 而 ， 本 书 呈现 的 
技术 确实 是 构成 当今 这 些 炫目 3D 效 果 的 基础 。 








我 们 没有 演 试 写 一 本 “OpenGL 参 考 大 全 ””， 因 此 ， 本 书 所 涵盖 的 
OpenGL 部 分 只 是 其 所 有 功能 中 的 一 小 部 分 。 我 们 的 目标 是 以 OpenGL 作 
为 基础 工具 ， 教 授 基 于 现代 着 色 器 的 3D 图 形 编 程 ， 并 为 读者 提供 足够 
深入 的 理解 ， 以 供 进一步 研究 。 


目标 读者 
本 书 的 主要 目标 读者 是 计算 机 科学 专业 的 学 生 〈 可 以 是 本 科 在 读 学 


生 ) ， 其 实 任何 想 要 学 习 计算 机 科学 相关 知识 的 人 也 适合 阅读 本 书 。 
此 ， 我 们 假设 读者 有 扎实 的 面 癌 对 象 编 程 基础 ， 全 少 相 当 于 计算 机 科学 





专业 大 二 或 大 三 学 生 的 水 平 。 





还 有 一 些 本 书 没有 涵盖 的 内 容 ， 因 为 我 们 假设 读者 已 经 掌握 了 足够 
的 背景 知识 ， 包括 : 


C++ 及 其 常用 库 ， 如 标准 模板 库 (Standard Template Library) ; 
熟悉 集成 开发 环境 (Integrated Development Environment, IDE) , 
如 Visual Studio; 

事件 驱动 编程 概念 ; 

基础 矩阵 代数 、 三 角 函 数 ; 

了 解 颜色 模型 ， 如 RGB、RGBA 等 。 


希望 本 书 的 潜在 受众 能 够 因为 对 其 Java 版 的 喜爱 而 进一步 文 持 本 
书 。 正 如 前 面 所 说 的 ， 我 们 期 望 看 到 这 样 一 种 情景 一 一 学 生 在 同一 门 课 
中 可 以 自由 选择 使 用 C++ 或 Java 版 本 的 教材 。 由 于 这 两 本 书 按 同 样 的 节 
奏 对 教学 内 容 进行 组 织 编排 ， 因 此 我 们 认为 可 以 尝试 以 这 种 开放 的 方式 
来 开展 课程 教学 和 学 习 。 








如 何 使 用 本 书 


本 书 从 内 容 安 排 上 适合 从 前 往 后 阅读 ， 即 后 面 各 章 中 的 内 容 经 常 依 
赖 于 前 面 各 章 中 所 讲 的 内 容 。 因 此 ， 在 各 章 中 来 回 跳 跃 地 选择 性 阅读 可 
能 并 不 适合 本 书 ， 读 者 最 好 逐 章 顺序 阅读 。 





本 书 同 时 可 以 作为 实用 的 动手 指南 。 由 于 e 
学 习 材 料 ， 因 此 读者 应 该 将 本 书 作 为 一 本 “练习 有 册 ”， USARP 








一 边 目 己 动 手 编程 来 理解 基础 概念 。 虽 然 我 们 为 所 有 的 示例 提供 了 代 
码 ， 但 是 想 要 真正 理解 这 些 概念 ， 还 是 得 上 自己 动手 “实现 "这些 代码 一 一 
通过 编程 来 搭建 你 自己 的 3D 场 景 。 








本 书 在 第 2 章 到 第 14 章 的 最 后 都 留 给 该 者 一 些 习 题 。 有 的 题 比 较 简 
单 ， 仅 仅 需 要 对 提供 的 代码 进行 简单 改动 就 可 以 解决 。 那 些 标 记 为 “项 
日 ”的 习题 ， 则 需要 读者 花费 更 多 的 时 间 来 解答 ， 因 为 可 能 需要 编写 大 
量 代 码 或 者 使 用 多 个 示例 中 用 到 的 技术 。 少 数 标记 为 “研究 ”的 习题 ， 则 
在 本 书 中 并 没有 提供 解 题 需要 学 习 的 细节 知识 ， 我 们 或 励 读 者 进行 目 主 


学 习 并 解答 。 











OpenGL 调 用 通常 会 有 很 长 的 参数 列表 。 在 撰写 本 书 时 ， 两 位 作者 
在 每 种 情况 下 都会 讨论 是 人 否 要 描述 所 有 的 参数 。 最 终 我 们 决定 在 最 初 的 
部 分 描述 所 有 参数 。 随 着 主题 深入 ， 我 们 避免 在 每 次 OpenGL 调 用 中 陷 
入 细 术 末节 的 描述 过 程 〈《 因 为 调用 的 次 数 很 多 ) ， 以 防 读者 失去 对 全 局 
的 理解 。 因 此 ， 在 浏览 示例 时 ， 读 者 需要 在 手边 准备 OpenGL 和 所 使 用 
的 各 种 库 的 参考 资料 。 


为 些 ， 我 们 建议 结合 一 些 优秀 的 在 线 资源 使 用 本 书 。OpenGL 的 文 
档 是 绝对 必要 的 。 有 关 各 种 命令 的 详细 信息 ， 可 以 利用 搜索 引擎 ， 或 访 
i] OpenGL 的 官方 网 站 获取 。 





我 们 的 示例 中 用 到 了 称 作 GLM 的 数学 库 。 在 安装 GLM ( 见 附录 ) 
后 ， 读 者 应 该 找到 其 在 线 文档 并 将 其 加 入 书签 。 


本 书 中 经 常用 到 的 另 一 个 库 是 SOIL2， 用 于 读 取 和 处 理 纹理 图 像 文 





件 ， 读 者 可 能 也 需要 定期 得 阅 它 的 文档 。SOIL2 没 有 中 心 化 的 文档 资 
源 ， 但 读者 通过 Web 搜 索 可 以 找到 一 些 例子 。 





还 有 许多 关于 3D 图 形 编程 的 图 书 ， 我 们 建议 与 本 书 并 行 阅读 〈 例 
如 要 解决 各 章 后 的 “研究 ”问题 )。 以 下 是 我 们 经 常 提 到 的 5 本 。 


e [SW15] Sellers et al. OpenGL SuperBible. 

e [KS16] Kessenich et al. OpenGL Programming Guide. 

e [WO13] Wolff, OpenGL 4 Shading Language Cookbook. 

e [AS14] Angel and Shreiner, Interactive Computer Graphics. 

e [LU16] Luna, Introduction to 3D Game Programming with DirectX 12. 


配套 资源 


本 书 提供 随 书 的 配套 资源 供 读者 下 载 ， 其 内 容 有 : 


e 书 中 所 有 C++ / OpenGL 程 序 和 相关 的 实用 类 文件 以 及 GLSL 着 色 器 
代码 ; 

。 各 种 程序 和 示例 中 使 用 的 模型 和 纹理 文件 ; 

。 用 于 制作 天 空 和 地 平 线 的 天 空 顶 和 立方 体贴 图 图 像 文件 ; 

。 用 于 照明 和 表面 细节 效果 的 法 线 贴 图 和 高 度 贴图 ; 

。 本 书 中 所 有 的 图 表 以 图 像 文 件 形式 提供 。 


述 文件 也 可 以 通过 访问 异步 社区 (www.epubit.com) 上 的 本 书页 
面 获 取 。 


教师 辅助 


我 们 或 励 大 学 或 学 院 的 教师 获取 本 书 的 教师 辅助 包 ， 其 中 包含 以 下 
附加 项 : 


一 套 完 整 的 PowerPoint 幻 灯 片 ， 涵 盖 本 书 中 的 所 有 主题 ; 
本 书 中 大 多 数 章 末 习 题 的 答案 和 所 需 代码 ; 

基于 本 书 的 课程 大 纲 示例 ; 

每 章 用 于 讲解 材料 的 额外 内 容 。 





教师 辅助 包 可 以 通过 联系 出 版 疝 获 取 : contact@epubit.com.cn。 


致谢 





本 书 中 的 许多 内 容 是 基于 我 们 之 前 出 版 的 Computer Graphics 
Programming in OpenGL with Java。 我 们 需要 感谢 许多 帮助 我 们 完成 上 
一 本 书 的 人 ， 他 们 继续 为 本 书 的 编写 提供 了 帮助 。Java 版 早期 的 草稿 被 
用 于 加 州 州立 大 学 萨克拉门托 分 校 的 CSc-155〈 高 级 计算 机 图 形 编 程 ) 
课程 中 ， 得 到 了 学 生 的 指正 ， 他 们 还 给 出 了 修改 建议 (包括 代码 ) 。 两 
位 作者 要 特别 感谢 Mitchell Brannan、Tiffany Chiapuzio-Wong、Samson 
Chua, Anthony Doan, Kian Faroughi, Cody Jackson, John Johnston, 
Zeeshan Khaliq. Raymond Rivera, Oscar Solorzano, Darren Takemoto, 


Jon Tinney. James Womack 及 Victor Zepeda 的 建议 。 


我 们 也 从 许多 教师 那里 得 到 了 很 好 的 反 饿 ， 他 们 采用 Computer 
Graphics Programming in OpenGL with Java 作 为 课程 教材 ， 同 时 向 我 们 
分 享 了 他 们 的 教学 经 验 。 塔 尔 萨 大 学 的 Mauricio Papa 博 士 和 我 们 进行 了 
几 次 对 我 们 非常 有 帮助 的 邮件 沟通 。Sean McCrory 对 光照 〈 第 7 章 ) 和 


相 林 噪声 〈 第 14 章 ) 出 现 的 问题 进行 了 非常 详细 的 修正 。 他 们 的 建议 帮 
助 我 们 对 本 书 进行 了 改进 。 我 们 还 收 到 了 许多 来 自 不 同学 校 的 学 生 提 出 
的 问题 ， 这 些 问题 帮助 我 们 评估 了 我 们 编写 方法 的 优 缺 点 。 








我 们 对 本 系列 书 的 第 一 次 试用 是 在 2017 年 的 秋天 ， 当 时 我 们 的 同事 
Pinar Muyan-Ozcelik 博 士 在 她 教授 的 CSc-155 课 程 上 第 一 次 使 用 了 
Computer Graphics Programming in OpenGL with Java， 这 让 我 们 有 机 会 
评估 我 们 是 否 实 现 了 让 本 书 成 为 “自学 ”资源 的 目标 。 访 程 进展 顺利 的 同 
时 ，Pinar Muyan-Ozcelik 博 士 也 为 每 章 留 存 了 问题 和 更 正 日 志 。 这 份 日 
志 帮 我 们 对 本 书 进行 了 许多 改进 。 








Martin Lucas Golini 是 SOIL2 纹 理 图 像 处理 库 的 开发 者 和 维护 者 ， 也 
对 本 书 表现 出 了 极 大 的 支持 和 热情 。 我 们 对 他 的 帮助 表示 非常 感谢 。 


Jay Turberville 来 自 于 亚利桑那 州 Scottsdale 的 Studio 522 
Productions。 他 创建 了 本 书 身 文 版 的 封面 和 书 中 用 到 的 海豚 模型 ， 学 生 
们 非常 喜欢 。Studio 522 Productions 制 作出 极 高 质量 的 3D 动 画 和 视频 ， 
以 及 自 定义 3D 建 模 。 我 们 很 感谢 Turberville 惊 慨 地 为 本 书 创建 这 个 精美 
的 模型 。 


我 们 还 要 感谢 其 他 一 些 艺术 家 和 研究 人 员 。 他 们 非常 慷慨 地 让 我 们 
使 用 他 们 的 模型 和 纹理 。 来 自 Planet Pixel Emporium 的 James Hastings- 
Trew 提 供 了 许多 行星 表面 纹理 。Paul Bourke 人 允许 我 们 使 用 他 拥有 的 精彩 
的 星 域 。 斯 坦 福 大 学 的 Marc Levoy 博 士 授 权 我 们 使 用 著名 的 “斯 坦 福 
龙 ” 模 型 。Paul Baker 的 凹凸 贴图 教程 是 我 们 在 许多 例子 中 使 用 的 “ 圆 


环 ” 模 型 的 基础 。 我 们 还 要 感谢 Mercury Learning 人 允许 我 们 使 用 《DirectX 
12 3D 游戏 开发 实战 》 外 中 的 一 些 纹理 。 


Danny Kopec E RAIA T Mercury Learning A F], JFE H E 
hi fal David Pallai 引 荐 了 我 们 。Kopec 博 士 的 《人 工 智能 〈 第 2 版) ) PIR 
成 功 出 版 让 我 们 考虑 与 Mercury 合 作 ， 我 们 与 Kopec 的 电话 交谈 也 对 我 们 
非常 有 帮助 。Kopec 博 士 的 早 逝 让 我 们 深 感 翡 痛 ， 也 对 他 没有 机 会 看 到 
本 书 的 成 书 感到 遗憾 。 


最 后 ， 我 们 要 感谢 Mercury Learning 的 David Pallai 和 Jennifer 


Blaney， 他 们 一 直 保持 着 对 这 个 项 目的 热情 并 引导 我 们 完成 了 本 书 的 整 
个 出 版 流程 。 


HIR 


如 果 你 在 阅读 本 书 时 发 现任 何 错误 ， 请 告诉 我 们 ! 尽管 我 们 尽 了 最 
大 努力 ， 但 本 书 肯 定 还 有 错误 。 当 收 到 错误 报告 时 ， 我 们 将 会 尽 最 大 努 
力 尽 快 发 布 。 我 们 建立 了 一 个 用 于 收集 并 发 布 勘误 的 网 页 : 


http://athena.ecs.csus.edu/~gordonvs/errata.htmll3] 


出 版 商 Mercury Learning 也 保留 了 本 书 勘误 表 页 面 的 链接 。 因 此 ， 
如 果 我 们 的 勘误 页 面 的 URL 有 变动 ， 请 查看 Mercury Learning 网 站 以 获 
取 最 新 链接 。 


参考 资料 


[AS14] E. Angel and D. Shreiner, Interactive Computer Graphics: A 
Top-Down Approach with WebGL, 7th ed. (Pearson, 2014). 


[KS16] J. Kessenich, G. Sellers, and D. Shreiner, OpenGL 
Programming Guide: The Official Guide to Learning OpenGL, Version 4.5 
with SPIR-V, 9th ed. (Addison-Wesley, 2016). 


[LU16] F. Luna, Introduction to 3D Game Programming with DirectX 
12, 2nd ed. (Mercury Learning, 2016). 


[SW15] G. Sellers, R. Wright Jr., and N. Haemel, OpenGL SuperBible: 
Comprehensive Tutorial and Reference, 7th ed. (Addison-Wesley, 2015). 


[W013] D. Wolff, OpenGL Shading Language Cookbook, 2nd ed. 
(Packt Publishing, 2013). 





[1] «DirectX 12 3D 游戏 开发 实战 》 已 由 人 民 邮 电 出 版 社 出 版 CISBN 
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作者 简介 


V. 斯 科 特 ' 戈 登 〈V. Scott Gordon) 博士 已 经 在 加 州 州立 大 学 系统 担 
任教 授 有 20 多 年 ， 目 前 在 加 州 州 立 大 学 院 元 拉 门 托 分 校 教授 高 级 图 形 和 
游戏 工程 课程 。 他 撰写 及 合 著 了 30 多 部 出 版 物 ， 涉 及 人 工 乔 能 、 神 经 网 
络 、 进 化 计算 、 软 件 工 程 、 视 频 和 策略 游戏 编程 ， 以 及 计算 机 科学 教育 
等 多 个 领域 。 戈 登 博士 在 科罗拉多 州立 大 学 获得 博士 学 位 。 他 同时 也 是 
医 士 喜 手 和 优秀 的 乒乓 球 运动 员 。 





约翰 : 克 羔 维 吉 (John Clevenger) 博士 拥有 超过 40 年 的 教学 经 验 ， 
教学 内 容 包括 高 级 图 形 、 游 戏 架 构 、 操 作 系统 、VLSI 心 片 设计 、 系 统 
仿真 和 其 他 主题 。 他 是 多 个 用 于 图 形 和 游戏 架构 教学 的 软件 框架 和 工具 
的 开发 人 员 ， 其 中 包括 我 们 Java 版 第 一 版 书 中 所 用 到 的 graphicslib3D 
库 。 他 是 国际 大 学 生 程 序 设计 竞赛 (ICPC) 的 技术 总 监 ， 负 责 监督 PC2 
的 持续 开 及 。PC2 是 目前 世界 上 使 用 较为 广泛 的 编程 竞赛 文 持 系统 。 殉 
羔 维 吉 博 士 在 加 州 大 学 戴 维 斯 分 校 获 得 博士 学 位 。 








资源 与 文 持 


本 书 由 异步 社区 出 品 ， 社 区 (https://www.epubit.com/)〉 为 您 提供 相 
关 资 源 和 后 续 服务 。 


配套 资源 
本 书 提供 如 下 资源 ; 
。 本 书 配套 源 代码 ; 
。 书 中 用 到 的 模型 、 图 形 、 纹 理 和 贴图 等 


。 书 中 彩 图 文件 。 





BSED LACE, RAK AB t,o 
转 到 下 载 界 面 ， 按 提示 进行 操作 即 可 。 注 意 : 为 保证 购书 读者 的 权益 ， 
该 操作 会 给 出 相关 提示 ， 要 求 输入 提取 码 进行 验证 。 





如 果 您 是 教师 ， 和 希望 获得 教学 配套 资源 ， 请 在 社区 本 书页 面 中 直接 
联系 本 书 的 贡 任 编辑 。 


提交 勘误 





作者 和 编辑 尽 最 大 努力 来 确保 书 中 内 容 的 准确 性 ， 但 难免 会 存在 下 


漏 。 欢 迎 您 将 用 现 的 问题 反馈 给 我 们 ， 帮 助 我 们 提升 图 书 的 质量 。 


当 您 发 现 错误 时 ， 请 登录 异步 社区 ， 按 书 名 搜索 ， 进 入 本 书页 面 ， 
单 击 “ 提 交 勘 误 ”， 输 入 勘误 信息 ， 单 击 “ 提 区” 按钮 即 可 。 本 书 的 作者 和 
编辑 会 对 您 提交 的 勘误 进行 审核 ， 确 认 并 接受 后 ， 您 将 获 赠 寞 步 社区 的 
100 积 分 。 积 分 可 用 于 在 异步 社区 部 换 优 囊 券 、 样 书 或 奖品 。 

















与 我 们 联系 
我 们 的 联系 邮箱 是 contact@epubit.com.cn。 


如 果 您 对 本 书 有 任何 疑问 或 建议 ， 请 您 发 邮件 给 我 们 ， 并 请 在 邮件 
标题 中 注 明 本 书 书 名 ， 以 便 我 们 更 高 效 地 做 出 反馈 。 


如 有 果 您 有 兴趣 出 版 图 书 、 录 制 教学 视频 ， 或 者 参与 图 书 翻译 、 技 术 
审 校 等 工作 ， 可 以 发 邮件 给 我 们 ， 有 意 出 版 图 书 的 作者 也 可 以 到 异步 社 
区 在 线 提交 投稿 〈 直 接 访 问 www.epubit.comy/selfpublish/submission 即 


Ay) o 


如 果 您 是 学 校 、 培 训 机 构 或 企业 ， 想 批量 购买 本 书 或 异步 社区 出 版 
的 其 他 图 书 ， 也 可 以 发 邮件 给 我 们 。 


如 果 您 在 网 上 发 现 有 针对 异步 社区 出 品 图 书 的 各 种 形式 的 盗版 行 
为 ， 包 括 对 图 书 全 部 或 部 分 内 容 的 非 授 权 传 播 ， 请 您 将 怀疑 有 侵权 行为 
的 链接 发 邮件 给 我 们 。 您 的 这 一 举动 是 对 作者 权益 的 保护 ， 也 是 我 们 持 
续 为 您 提供 有 价值 的 内 容 的 动力 之 源 。 








天 于 开 步 社区 和 有 异步 图 书 


“ 寞 步 社区 ”是 人 民 邮 电 出 版 社 旗下 IT 专 业 图 书社 区 ， 致 力 于 出 版 精 
品 IT 技术 图 书 和 相关 学 习 产 品 ， 为 作 译 者 提供 优质 出 版 服务 。 异 步 社 区 
创办 于 2015 年 8 月 ， 提 供 大 量 精 品 IT 技术 图 书 和 电子 书 ， 以 及 高 品质 技 
术 文 章 和 视频 谍 程 。 更 多 详情 请 访问 异步 社区 官网 


https://www.epubit.com. 








“异步 图 书 ” 是 由 异步 社区 编辑 团队 集 划 出 版 的 精品 开 专 业 图 书 的 品 
牌 ， 依 托 于 人 民 邮 电 出 版 社 近 30 年 的 计算 机 图 书 出 版 积累 和 专业 编辑 团 
队 ， 相 关 图 书 在 封面 上 印 有 异步 图 书 的 LOGO。 腊 步 图 书 的 出 版 领域 包 
括 软件 开发 、 大 数据 、AI、 测 试 、 前 端 、 网 络 技术 等 。 
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图 2.5 ”改变 glPointSize 
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图 2.9 光栅 化 《 
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图 2.13 ”请 段 着 色 器 颜色 变化 








图 4.3 ”程序 4.1 的 输出 。 从 (0,0,8) 看 位 于 (0,-2,0) 的 红色 立方 体 








图 4.6 
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图 4.15 
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图 5.18 ”使 用 不 同 环绕 选项 的 金字 塔 材质 贴 
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图 6.3 将 项 点 组 合成 三 角形 


vertex[|(i+l1)en+j] ~ vertex[(i+1)#n+j+1] 
x 





vertex[i#n+j] vertex[ixn+j+1] 


图 6.6 第 i 个 切片 中 的 第 j 个 顶点 的 索引 序号 (n= 每 个 切片 的 顶点 数 ) 
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环境 光 反 射 





镜面 反射 


图 7.1 ADS 光 照 分 量 


io S22 A MEAS 
34,014 — fF 


斯 幸福 龙 
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图 7.16 ” Phong 着 色 的 外 部 模型 








图 7.17 结合 光照 与 纹理 





图 8.10 ”第 1 轮 : 场景 ( 左 ) 和 从 光源 视角 演 染 的 场景 ( 右 ) 





图 8.19 ” 单 像素 PCF 采 样 





Case. Case. Case. Case. 


偏 移 模式 2 = (0,0) 偏 移 模式 2= (0,1) 偏 移 模式 2 = (1,0) 偏 移 模 z = (1,1) 


图 8.22 ”抖动 的 4 像素 PCF 采 样 示例 





图 8.23 ”抖动 的 4 像素 PCF 采 样 (4 种 偏 移 模式 ) 











图 9.10 ”用 于 创建 反射 环 面 的 环境 贴图 示例 














图 10.14 地形， 在 顶点 着 色 器 中 进行 高 度 贴图 








P, 


q2 = (po+p1)/4 + 
(P1+p2)/4 


qı = (pot pi) 2 7, 







qo = Po 





图 11.9 二 次 贝 塞 尔 控制 网 格 和 相应 的 表面 





图 11.10 三 次 贝 塞 尔 控制 网 格 和 相应 的 曲面 





图 12.1 Tessellator 三 角形 网 格 输出 


颜色 OLE) 基于 对 象 颜色 


颜色 OLY) 基于 雾 的 颜色 





图 14.1 3: 基于 距离 的 混合 





图 14.2 ZBF 
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图 14.8 条纹 3D 纹 理 图 




















3D 条 纹 纹 理 的 龙 对 象 

















图 14.17 ”3D 噪 声 图 纹理 的 龙 一 -3 个 大 理 石和 1 个 玉 质 








图 14.18 ”为 3D 木 材 纹理 创建 年 轮 





图 14.21 云雾 综 绕 纹理 的 天 幕 





图 14.22 ”指数 云 纹理 的 天 幕 
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图 形 编程 是 计算 机 科学 中 最 具 挑 战 性 的 主题 之 一 ， 并 因此 而 闻名 。 
当今 ， 图 形 编程 是 基于 着 色 圳 的 一 一 也 就 是 说 ， 有 些 程序 是 用 诸如 
C++ 或 Java 等 标准 编程 语言 编写 的 ， 并 运行 在 CPU 上 ; 而 男 一 些 是 用 专 
用 的 着 色 器 语言 编写 的 ， 并 直接 运行 在 显卡 GPU) 上。 着 色 器 编程 的 
学 习 曲 线 很 陡峭 ， 以 怪 哪 怕 是 绘制 简单 的 东西 ， 也 需要 一 系列 错综复杂 
的 步 怠 ， 把 图 形 数 据 从 一 个 “管线 ”中 传递 下 去 才能 完成 。 现 代 显 卡 能 够 
并 行 处 理 数 据 ， 即 使 是 绘制 简单 的 形状 ， 图 形 程序 员 也 必须 理解 GPU 的 
并 行 架 构 。 

















里 然 这 并 不 简单 ， 但 回报 是 超 强 的 演 染 能 力 。 电 子 游戏 中 涌现 出 来 
的 令 人 恢 艳 的 虚拟 现实 和 好 莱 雹 电影 中 越 来 越 逼 真 的 特效 ， 很 大 程度 上 
是 由 着 色 吉 编程 的 进步 带 来 的 。 如 果 阅 读本 书 是 你 进入 3D 图 形 世 界 的 
第 一 步 ， 那 么 你 正在 开始 接受 一 个 对 自己 的 挑战 。 挑 战 的 奖励 不 仅仅 是 
漆 亮 的 图 片 ， 还 有 过 往 不 敢 想 象 的 对 机 器 的 擎 探 程度。 欢迎 来 到 激动 人 
心 的 计算 机 图 形 编程 世界 ! 





1.1 语言 和 库 





现代 图 形 编程 使 用 图 形 库 完成 ， 也 就 是 说 ， 程 序 员 编写 代码 时 ， 调 
用 一 个 预先 定义 的 库 〈 或 者 一 系列 库 ) 中 的 函数 ， 由 这 个 库 来 提供 对 底 








层 图 形 操 作 的 支持 。 现 在 有 很 多 图 形 库 ， 但 常见 的 平台 无 关 图 形 编 程 库 
叫 作 OpenGL (Open Graphics Library， 开 放 图 形 库 ) 。 本 书 将 会 介绍 如 
何在 C++ 中 使 用 OpenGL 进 行 3D 图 形 编程 。 





在 C++ 中 使 用 OpenGL 需 要 配置 多 个 库 。 这 里 按照 个 人 需求 ， 可 以 


有 一 系列 令 人 眼花 综 乱 的 选择 。 在 本 市 中 ， 我 们 会 介绍 哪 几 种 库 是 必要 
的 ， 


中 ， 
和 配置 的 更 多 细 市 请 参阅 附录 。 


各 种 库 的 一 些 和 常见 选择 ， 以 及 我 们 在 本 书 中 选择 的 库 。 
忆 的 来 说 ， 你 需要 以 下 这 些 语言 和 库 : 


C++ 开发 环境 ; 
OpenGL / GLSL; 
窗口 管理 ; 
扩展 库 ; 
数学 库 ; 

纹理 管理 。 








读者 可 能 需要 进行 几 个 准备 步骤 ， 以 保证 这 几 种 库 己 安装 在 系统 
并 可 以 正常 使 用 。 下 面 几 个 小 节 将 简单 介绍 每 一 种 语言 和 库 。 安 装 





1.1.1 C++ 


C++ 是 一 种 通用 编程 语言 ， 最 早出 现在 20 世 纪 80 年 代 中 期 。 它 的 设 


计 ， 以 及 它 通 第 被 编译 成 本 机 的 机 器 人 码 这 一 事实 ， 使 得 它 成 为 了 需要 高 
性 能 的 系统 的 优秀 选择 ， 比 如 3D 图 形 计算 。C++ 的 男 一 个 优点 是 


OpenGL 调 用 库 是 基于 C 语 言 开 发 的 。 


有 许多 可 用 的 C++ 开发 环境 。 在 阅读 本 书 时 ， 如 果 读 者 使 用 
PC (Windows 操 作 系 统 ) ， 我 们 推荐 使 用 Microsoft Visual Studio [YS17]; 
如 果 在 苹果 计算 机 上 ， 我 们 推荐 Xcode [XC18]。 附 录 中 也 介绍 了 各 个 平台 
下 的 安装 和 配置 。 


1.1.2 OpenGL /GLSL 





OpenGL 的 1.0 版 本 出 现在 1992 年 ， 是 一 种 对 供应 两 特定 的 计算 机 图 
形 应 用 编程 接口 (API) 的 “开放 性 ”替代 。 





它 的 规范 和 开发 工作 由 当时 新 成 并 的 OpenGL 架 构 评 审 委员 会 
(ARB) 管理 和 控制 。ARB 是 一 群 行业 参与 者 组 成 的 小 组 。2006 年 ， 
ARB 将 OpenGL 规 范 的 控制 权 交 给 了 Khronos Group. Khronos Group 是 一 
个 非 营 利 性 联盟 ， 不 仅 管理 OpenGL 标 准 ， 还 管理 很 多 其 他 的 开放 性 行 
业 标 准 。 


从 一 开始 ，OpenGL 就 定期 修订 和 扩展 。2004 年 ，2.0 版 本 中 引入 了 
OpenGL# fifa (GLSL) ， 使 得 “着 色 器 程序 "可 以 在 图 形 管线 的 各 个 
阶段 被 安装 和 直接 执行 。 


2009 年 ，3.1 版 本 中 移 除了 大 量 被 弃 用 的 功能 ， 以 强制 使 用 着 色 器 
编程 ， 而 不 是 之 前 的 老 方法 ( 叫 作 “立即 模式 *”) 。H 在 最 近 的 功能 中 ， 
4.0 版 本 (2010 年 ) 在 可 编程 管线 中 增加 了 一 个 细 分 阶段 。 











这 本 书 假定 用 户 的 机 器 有 一 个 文 持 至 少 4.3 版 本 OpenGL 的 显卡 。 如 
果 你 不 确定 你 的 GPU 支 持 哪个 版 本 的 OpenGL， 网 上 有 人 免费 的 应 用 程序 
可 以 用 来 找 出 答案 。 有 一 个 这 样 的 应 用 程序 是 GLView， 由 “realtech 


VR” 公 司 提供 [6V161。 


113 窗口 管理 





OpenGL 实 际 上 并 不 是 把 图 像 直接 绘制 到 计算 机 屏幕 上 ， 而 是 泻 染 
到 一 个 帧 缓冲 区 ， 然 后 需要 由 这 人 台 机 器 来 负责 把 帧 缓冲 区 的 内 容 绘制 到 
屏幕 上 的 一 个 窗口 中 。 有 不 少 库 都 可 以 支持 这 一 部 分 工作 。 一 个 选择 是 
使 用 操作 系统 提供 的 窗口 管理 功能 ， 比 如 Microsoft Windows API。 但 
这 通常 是 不 实用 的 ， 需 要 很 多 底层 的 编码 工作 。GLUT 库 曾经 是 一 个 很 
流行 的 选择 ， 但 现在 已 经 被 弃 用 了 。 它 的 一 个 现代 化 的 演变 是 freeglut 
库 。 其 他 相关 的 选项 还 有 CPW 库 、GLOW 库 和 GLUI 库 。 











GLFW 是 最 流行 的 选择 之 一 ， 也 是 我 们 这 本 书 中 选择 使 用 的 。 它 内 
置 了 对 Windows、macOS、Linux 和 其 他 操作 系统 LcE17 的 支持 。 它 可 以 
在 其 官网 下 载 ， 并 且 必 须 在 要 使 用 它 的 机 器 上 编译 。 “我 们 在 附录 中 介 
绍 了 相关 步骤 。) 


1.1.4 扩展 库 


OpenGL 围 绕 一 组 基本 功能 和 扩展 机 制 进行 组 织 。 随 着 技术 的 发 
展 ， 扩 展 机 制 可 以 用 来 支持 新 的 功能 。 现 代 版 本 的 OpenGL， 比 如 我 们 


在 本 书 中 使 用 的 4 以 上 版 本 ， 需 要 识别 GPU 上 可 用 的 扩展 。OpenGL 核 心 
中 有 一 些 内 置 的 命令 用 来 支持 这 些 ， 但 是 为 了 使 用 每 个 现代 命令 ， 需 要 
执行 很 多 相当 复杂 的 代码 行 。 在 本 书 中 ， 我 们 会 持续 不 断 地 使 用 这 些 命 
令 。 所 以 使 用 一 个 扩展 库 来 处 理 这 些 细 节 已 经 成 了 标准 做 法 ， 这 样 能 让 
程序 员 可 以 直接 使 用 现代 OpenGL 命 令 。 比 如 Glee、GLLoader 和 
GLEW， 以 及 更 加 新 的 GL3W 和 GLAD。 





列 出 的 这 些 库 中 ， 常 用 的 是 GLEW， 意 思 是 OpenGL 扩 展 牧马人 
(OpenGL Extension Wrangler) 。 它 支持 各 种 操作 系统 ， 包 括 
Windows、Macintosh 和 Linux [GE1]。GLEW 不 是 一 个 完美 的 选择 。 例 
如 ， 它 需要 一 个 额外 的 DLL。 最 近 ， 很 多 开发 者 选择 GL3W 或 者 
GLAD。 它 们 的 优势 是 可 以 自动 更 痢 ， 但 是 要 求 安装 Python。 因 为 这 些 
原因 ， 在 本 书 中 我 们 选择 使 用 GLEW。 它 可 以 在 官网 下 载 。 附 录 中 给 出 
了 安装 和 配置 GLEW 的 完整 说 明 。 


1.1.5 ”数学 库 





3D 图 形 编程 大 量 使 用 癌 量 和 和 矩阵 代数 。 因 此 ， 配 合 一 个 文 持 常见 
数学 计算 任务 的 函数 库 或 者 类 包 ， 能 极 大 地 方便 OpenGL 的 使 用 。 常 党 
和 OpenGL 一 起 使 用 的 两 个 这 样 的 库 是 Eigen 和 vmath。 后 者 在 流行 的 
OpenGL SuperBible [SW15] 中 被 使 用 。 





可 能 最 流行 的 数学 库 ， 也 是 本 书 中 使 用 的 ， 是 OpenGL 
Mathematics， 一 般 称 作 GLM。 它 是 一 个 只 有 头 文 件 的 C++ 库 ， 兼 容 





Windows. macOS#llLinux [IGM1I7]。GLM 命 令 很 方便 地 遵循 和 GLSL 相 同 
的 命名 惯例 ， 使 得 来 回 阅读 特定 应 用 程序 的 C++ 和 GLSL 代 码 时 更 容 
易 。GLM 可 以 在 官网 下 载 。 





GLM 提 供与 图 形 概念 相关 的 类 和 基本 数学 函数 ， 例 如 矢量 、 窃 阵 
和 四 元 数 。 它 还 包含 各 种 工具 类 ， 用 于 创建 和 使 用 常见 的 3D 图 形 结 
构 ， 例 如 透视 和 视角 和 矩阵。 它 最 早 在 2005 年 发 布 ， 由 Christophe Riccio 
[GM17] 维 护 。 有 关 安 装 GLM 的 说 明 ， 请 参阅 附录 。 


1.1.6 ”纹理 管理 





从 第 5 章 开始 ， 我 们 将 使 用 图 像 文 件 来 回 我 们 图 形 场 景 中 的 对 象 添 
加 “纹理 *"。 这 意味 着 我 们 会 需要 频繁 加 载 这 些 图 像 文件 到 我 们 的 C++ / 
OpenGL 代 码 中 。 从 零 开 始 写 一 个 纹理 图 像 加 载 器 是 可 能 的 。 但 是 ， 考 
虑 到 各 种 各 样 的 图 像 文件 格式 ， 使 用 一 个 纹理 加 载 库 通常 是 更 好 的 。 比 
如 FreeImage、DevIL 、OpenGL Image (GLD 和 Glraw。 人 简单 OpenGL 图 像 
加 载 器 (Simple OpenGL Image Loader, SOIL) 可 能 是 最 常用 的 OpenGL 
图 像 加 载 库 ， 尽 管 它 有 点 过 时 了 。 


本 书 中 使 用 的 纹理 图 像 加 载 库 是 SOIL2 SOILL 的 一 个 更 新 的 分 又 
版 本 。 像 我 们 之 前 选择 的 库 一 样 ，SOIL2 兼 容 各 种 平台 [so17]。 附 录 中 给 
出 了 详细 的 安装 和 配置 说 明 。 


1.1.7 可 选 库 


读者 可 能 希望 利用 很 多 其 他 有 用 的 库 。 例 如 ， 在 本 书 中 ， 我 们 将 展 
示 如 何 从 零 开 始 实现 一 个 简单 的 “OBJ 了 ”模型 加 载 器 。 然 而 ， 正 如 我 们 将 
看 到 的 ， 它 没有 处 理 OBJ 标 准 中 可 用 的 很 多 选项 。 有 一 些 更 复杂 的 现成 
的 OBJ 加 载 器 可 供 选 择 ， 比 如 Assimp 和 tinyobjloader。 在 我 们 的 例子 中 ， 
我 们 会 只 用 在 本 书 中 介绍 和 实现 的 简单 模型 加 载 器 。 


1.2 ”安装 和 配置 


在 开发 本 书 的 C++ 版 本 时 ， 我 们 斗争 了 很 人 ， 想 要 找到 守 括 用 来 运 
行 示 例 程序 的 平台 特定 配置 信息 的 最 佳 方法 。 配 置 用 C++ 来 使 用 
OpenGL 的 系统 ， 要 比 用 Java 配 置 复杂 得 多 。Java 版 本 的 配置 只 需要 几 个 
短 段 落 就 可 以 描述 完毕 (正如 在 本 书 Java 版 中 看 到 的 IGC18]) 。 最 终 ， 我 
们 选择 把 安装 和 配置 信息 在 各 平台 特定 的 附录 中 分 别 描述 。 我 们 和 希望 这 
能 为 每 个 读者 提供 一 个 相关 的 地 方 来 寻找 关于 他 /她 的 系统 的 特定 信 
轧 ， 而 不 是 被 和 他 /她 无 关 的 其 他 平台 的 信息 干扰 。 在 这 个 版 本 中 ， 我 
们 在 附录 A 中 提供 了 Microsoft Windows 平 台 的 详细 配置 教程 ， 在 附录 了 B 
中 提供 了 苹果 Macintosh 平 台 的 详细 配置 教程 。 
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[1] 尽管 如 此 ， 许 多 显卡 厂商 (比如 NVIDIA) 依然 继续 支持 被 弃 用 的 
功能 。 


2% OpenGLy ye Zz 


OpenGL 是 整合 软 人 硬件 的 多 平台 2D 和 3D 图 形 API。 使 用 OpenGL 需 要 
显卡 (GPU) 支持 足够 新 版 的 OpenGL 〈 如 第 1 章 所 述 ) 。 


在 硬件 方面 ，OpenGL 提 供 了 一 个 多 级 图 形 管 线 ， 可 以 使 用 一 种 名 
为 GLSL 的 语言 进行 部 分 编程 。 


软件 方面 ，OpenGL 的 API 是 用 C 语 言 编 号 的 ， 因 此 API 调 用 直接 兼 
容 C 和 C++。 对 于 十 几 种 其 他 的 流行 语言 〈Java、Perl、Python、Visual 
Basic、Delphi、Haskell、Lisp、Ruby 等 ) ，OpenGL 也 有 着 稳定 的 库 
(或 “包装 器 *) ， 有 具有 与 C 语 言 库 几乎 相同 的 性 能 。 本 书 使 用 的 C++， 
应 该 是 目前 流行 的 OpenGL 语 言 。 使 用 C++ 时 ， 程 序 员 编写 在 CPU 上 运 
行 的 (编译 后 的 ) 代码 并 包含 OpenGL 调 用 。 当 一 个 C++ 程 序 包 含 
OpenGL 调 用 时 ， 我 们 将 其 称 为 C++/OpenGL 应 用 程序 。C++/OpenGL 应 
用 程序 的 一 个 重要 任务 是 将 程序 员 的 GLSL 代 码 安 闭 到 GPU 上 。 











基于 C++ 的 图 形 应 用 大 致 如 图 2.1 所 示 ， 其 中 软件 部 分 以 底 色 突出 显 


最 终 用 户 





使 用 Open 


GL 调用 
的 C++ 应 用 程序 


程序 员 
: 安装 
运行 于 
GLSL 着 色 器 代码 1 """""" > 


图 2.1 基于 C++ 的 图 形 应 用 概览 


在 我 们 后 面 的 代码 中 ， 一 部 分 用 C++ 编码 ， 进 行 OpenGL 调 用 ; 35 
一 部 分 是 GLSL 。C++/OpenGL 应 用 程序 、GLSL 模 块 和 硬件 一 起 用 来 生 
成 3D 图 形 输出 。 当 应 用 完成 之 后 ， 最 终 用 户 直 接 与 C++ 应 用 程序 进行 交 
互 。 





GLSL 是 一 种 着 色 器 语言 。 着 色 器 语言 主要 运行 于 GPU 上 ， 在 图 形 
管线 上 下 文中 。 还 有 一 些 其 他 的 着 色 器 语言 ， 如 HLSL， 用 于 微软 的 3D 
框架 DirectX。GLSL 是 与 OpenGL 兼 容 的 专用 着 色 器 语言 ， 因 此 我 们 在 
C++/OpenGL 应 用 代码 之 外 ， 雷 要 用 GLSL 写 着 色 器 代码 。 


本 章 其 余 内 容 将 简单 地 浏览 OpenGL 管 线 的 内 容 。 读 者 不 用 期 望 详 
细 理 解 所 有 细节 ， 这 里 只 要 对 各 阶段 如 何 工 作 有 大 致 感 党 即 可 。 


2.1 OpenGL’ 2% 


现代 3D 图 形 编程 会 使 用 管线 的 概念 ， 在 管线 中 。 将 3D 场 景 转换 成 
2D 图 形 的 过 程 被 分 割 成 许多 步骤 。OpenGL 和 DirectX 使 用 了 相似 的 管线 
概念 。 


图 2.2 展 示 了 OpenGL 图 形 管线 简化 后 的 概览 〈 并 未 展示 所 有 阶段 ， 
仅 包含 我 们 要 学 习 的 主要 阶段 ) 。C++/OpenGL 应 用 发 送 图 形 数据 到 顶 
点 着 色 器 ， 随 着 管线 处 理 ， 最 终生 成 在 显示 器 上 显示 的 像素 点 。 








从 C++ 应 用 程序 
顶点 处 理 
图 元 (三 角形 ) 处 理 
片段 (像素 ) 处 理 
片段 着 色 器 | 


图 2.2” OpenGL 管线 概览 
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阶段 也 是 C++/OpenGL 程 序 的 贡 任 之 一 ， 其 过 程 如 下 。 


(1) 首先 使 用 C++ 获 取 GLSL 着 色 絮 代码 ， 既 可 以 从 文件 中 读 取 ， 
也 可 以 硬 编码 在 字符 串 中 。 


(2) 接 下 来 创建 OpenGL 着 色 器 对 象 并 将 GLSL 着 色 器 代码 加 载 进 
着 色 器 对 象 。 


(3) 最 后 ， 用 OpenGL 命 令 编译 并 连接 着 色 嚣 对象 ， 并 将 它们 安装 
HEGPU. 


FESR BRA, ABD EE Ge Pe IL a ERNA BRE £8 ae BT BH GLSL 
代码 ， 而 曲面 细 分 着 色 器 和 几何 着 色 峰 阶段 是 可 选 的 。 接 下 来 我 们 将 简 
单 地 过 一 下 整个 过 程 ， 并 看 看 每 步 发 生 了 什么 。 





2.1.1 C++/OpenGL 应 用 程序 





我 们 的 图 形 应 用 程序 中 大 部 分 是 使 用 C++ 进 行 编写 的 。 根 据 程 序 日 
的 的 不 同 ， 它 可 能 需要 用 标准 C++ 库 与 最 终 用 户 交 互 ， 用 OpenGL 调 用 
实现 与 3D 泻 染 相 关 的 任务 。 正 如 前 面 章节 所 述 ， 我 们 将 会 使 用 一 些 打 - 
展 库 : GLEW (OpenGL Extension Wrangler) ~ GLM (OpenGL 
Mathmatics) ~ SOIL2 (Simple OpenGL Image Loader) 以 及 








GLFW (Graphics Library Framework) 。 


GLFW 库 包含 了 GLFWwindow 类 ， 我 们 可 以 在 其 上 进行 3D 场 景 绘 
制 。 如 前 所 述 ，OpenGL 也 同 我 们 提供 了 用 于 将 GLSL 程 序 安装 到 可 编程 
着 色 器 阶段 并 编译 的 命令 。 最 后 ，OpenGL 使 用 缓冲 区 将 3D 模 型 和 其 他 
相关 图 形 数据 发 送 到 管线 中 。 


在 我 们 尝试 编写 着 色 右 之 前 ， 先 写 一 个 简单 的 C++/OpenGL 程 序 ， 





创建 一 个 GLFWwindow 实 例 并 为 其 设置 背景 色 。 这 个 过 程 根 本 用 不 到 着 
色 器 ! 其 代码 如 程序 2.1 所 示 。 程 序 2.1 中 的 main0 函 数 与 本 书 中 所 有 将 会 
用 到 的 main() 函 数 一 样 。 其 中 重要 的 操作 有 : (a) 初始 化 GLFW 库 ; 
Cb) 实例 化 GLFWwindow; (c) 初始 化 GLEW 库 ;i (dD 调用 一 次 
init() 函 数 ;，(e) 重复 调用 displayO 函 数 。 


我 们 将 每 个 应 用 程序 的 初始 化 任务 都 放 在 initO0 函 数 中 ， 用 于 绘制 
GLFWwindow 的 代码 都 将 放 在 display0O 函 数 中 。 


在 本 例 中 ，glClearColor0 命 令 指 定 了 清除 背景 时 用 的 颜色 值 一 一 这 
里 (1,0,0,1) 代 表 RGB 值 中 的 红色 (末尾 的 1 表示 不 透明 度 ) 。 接 下 来 使 用 
OpenGL 调 用 glClear(GL_COLOR_BUFFER_BIT)， 实 际 使 用 红色 对 颜色 
缓冲 区 进行 填充 。 


程序 2.1 第 一 个 Ct++/OpenGL 应 用 程序 

















#include <GL\glew.h> 
#include <GLFW\glfw3.h> 
#include <iostream> 


using namespace std; 
void init(GLFWwindow* window) { } 


void display(GLFWwindow* window, double currentTime) { 
glClearColor(1.0, 0.0, 0.0, 1.0); 
glClear(GL_COLOR_ BUFFER BIT); 

} 


int main(void) { 
if (!glfwInit()) { exit(EXIT_FAILURE); } 
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 4); 
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3); 
GLFWwindow* window = glfwCreateWindow(600, 600, "Chapter2 - programi", 
NULL, NULL); 


glfwMakeContextCurrent (window) ; 
if (glewInit() != GLEW_OK) { exit(EXIT_FAILURE); } 
glfwSwapInterval(1); 


init (window) ; 


while (!glfwWindowShouldClose(window)) { 
display(window, glfwGetTime()); 
glfwSwapBuf fers (window) ; 
glfwPollEvents(); 

} 


glfwDestroyWindow(window) ; 
glfwTerminate() ; 
exit (EXIT SUCCESS); 








图 2.3 展 示 了 程序 2.1 的 输出 。 
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图 2.3 ”程序 2.1 的 输出 








函数 部 署 的 机 制 如 下 : GLFW 和 GLEW 库 先 分 别 使 用 glfwInit() 
和 glewInit() 初 始 化 。glfwCreateWindow() 命 令 负 责 创 建 GCLFW 窗 口 ， 同 
时 其 相关 的 OpenGL 上 下 文 叫 由 glftwCreateWindow0O 命 令 创建 ， 其 可 选项 
ene nee OE 
AA BHA CERERE” =4, “次 版 本 号 ”=3) 。glfwCreateWindow 命 令 的 


参数 指定 了 窗口 的 宽 、 高 〈 以 像素 为 单位 ) 以 及 窗口 顶部 的 标题 。《〈 这 
里 没有 用 到 的 另外 两 个 参数 设 为 NULL， 分 别 用 来 允许 全 屏 显 示 以 及 资 
源 共 享 。) glfwSwapInterval0 命 令 和 glfwSwapBuffers 命 令 用 来 开启 垂直 
同步 (Vsync) 一 一 GLFW 窗 口 默 认 是 双 绥 冲 的 。 轩 这 里 需要 注意 ， 创 
建 GLFW 窗 口 并 不 会 自动 将 它 与 当前 OpenGL 上 下 文 关联 起 来 一 一 因此 
我 们 需要 调用 glftwMakeContextCurrent()。 





main() 函 数 包括 了 一 个 简单 的 泻 染 循环 ， 用 来 反复 调用 display0) 方 
法 。 同 时 它 也 调用 了 glfwSwapBuffers() 以 绘制 屏幕 ， 以 及 
glfwPollEvents() 以 处 理 窗口 相关 事件 (如 按键 事件 ) 。 当 GLFW 探 测 到 
应 该 关闭 窗口 的 事件 (如 用 户 单 击 了 右上 角 的 x) 时 ， 循 环 就 会 终止。 
这 里 需要 注意 ， 我 们 将 一 份 GLFW 窗 口 对 象 的 引用 传 入 了 init0 和 
displayO 调 用 。 这 些 函 数 在 特定 环境 下 需要 访问 GLFW 窗 口 对 象 。 同 时 
我 们 也 将 当前 时 间 传 入 了 displayO 调 用 ， 这 样 方便 保证 动画 在 不 同 计 算 
机 上 以 相同 速度 播放 。 在 这 里 ， 我 们 用 了 glftwGetTime()， 它 会 返回 
GLFW 初 始 化 之 后 经 过 的 时 间 。 





现在 是 时 候 详细 看 看 程序 2.1 中 的 OpenGL 调 用 了 。 首 先 关 注 一 下 这 
个 调用 : 


glClear(GL COLOR BUFFER BIT); 


在 这 里 ， 调 用 的 OpenGL 参 考 文档 中 的 描述 是 : 


void glClear(GLbitfield mask); 


参数 中 引用 了 类 型 为 GLbitfield 的 “GL_COLOR BUFFER_BIT”。 


OpenGL 有 很 多 预定 义 的 第 量 〈 其 中 很 多 是 枚 举 量 ) 。 
GL_COLOR_BUFFER_BIT 引 用 了 包含 泻 染 后 像素 的 颜色 缓冲 区 。 
OpenGL 有 多 个 颜色 缓冲 区 ， 这 个 命令 会 将 它们 全 部 清除 一 一 用 一 种 被 
称 为 “清除 色 (clear color) ”的 预定 义 颜 色 填 充 所 有 绥 冲 区 。 注 意 ， 这 里 
的 “清除 (clear) ”表示 的 不 是 “颜色 清晰 ”， 而 是 用 来 重 置 缓冲 区 时 填充 
的 颜色 GAR) 。 








在 调用 glClear0 后 紧 接着 是 glClearColor0 的 调用 。glClearColorO 让 
我 们 能 够 指定 颜色 缓冲 区 清除 后 填充 的 值 。 这 里 我 们 指定 了 (1,0,0,1)， 
即 RGBA 颜 色 中 的 红色 。 








最 后 ， 当 用 户 尝 试 关 闭 GLFW 窗 口 时 ， 程 序 将 退出 泻 染 循环 。 这 
时 ，main() 会 通过 分 别 调用 glftwDestroyWindow() 和 glfwTerminate() 通 知 
GLFW 销 毁 窗口 以 及 终止 运行 。 


2.1.2 ”顶点 着 色 器 和 片段 着 色 器 


在 第 一 个 OpenGL 程 序 中 ， 我 们 实际 上 并 没有 绘制 任何 东西 一 一 仅 
仅 用 一 种 颜色 来 填充 了 颜色 缓冲 区 。 要 真 的 绘制 点 什么 ， 我 们 需要 加 入 
顶点 着 色 器 和 片段 着 色 器 。 


你 可 能 对 于 学 习 OpenGL 只 让 你 绘制 少数 几 类 非常 简单 的 东西 有 点 
吃惊 ， 如 点 、 线 、 三 角形 。 这 些 简单 的 东西 叫 作 图 元 ， 多 数 3D 模 型 通 
常 是 由 许多 三 角形 的 图 元 构成 。 图 元 由 顶点 组 成 一 一 例如 三 角形 有 3 个 
顶点 。 顶 点 可 以 由 很 多 来 源 产生 一 一 从 文件 读 取 并 由 C++/ OpenGL 应 用 








载 入 缓冲 区 、 直 接 在 C++ 文件 中 硬 编 码 或 者 直接 在 GLSL 代 码 中 。 


在 加 载 顶 点 之 前 ，C++/OpenGL 应 用 必须 编译 并 链接 合适 的 GLSL 顶 
点 着 色 器 和 片段 着 色 器 程序 ， 之 后 将 它们 载 入 管线 。 我 们 稍 后 将 会 看 到 


这 些 命令 ， 


C++/OpenGL 应 用 同时 也 负责 通知 OpenGL 构 建 三 角形 ， 通 过 使 用 如 
下 OpenGL 函数 完成 : 


glDrawArrays(GLenum mode, Glint first, GLsizei count); 


mode 参 数 是 图 元 的 类 型 一 一 对 于 三 角形 我 们 用 GL_TRIANGLES。 
first 参 数 表示 从 哪个 顶点 开始 绘制 (通常 是 顶点 0， 即 第 一 个 顶点 )， 
count 表 示 总 共 要 绘制 的 顶点 数 。 


当 调 用 glDrawArraysO0 时 ， 管 线 中 的 GLSL 代 码 开始 执行 。 现 在 可 以 
向 管线 加 一 些 GLSL 代 码 了 。 


不 管 它们 从 何 处 读 入 ， 所 有 的 顶点 都 会 被 传 入 顶点 着 色 器 。 顶 点 们 
会 被 一 个 一 个 地 处 理 ， 即 着 色 器 会 对 每 个 顶点 执行 一 次 。 对 拥有 很 多 顶 
点 的 大 型 复 末 模型 而 言 ， 顶 点 着 色 器 会 执行 成 百 上 干 甚至 百 万 次 ， 这 些 
执行 过 程 通 第 是 并 行 的 。 





现在 ， 我 们 来 写 一 个 简单 的 程序 ， 它 仅 包 含 一 个 顶点 ， 硬 编码 于 项 
点 着 色 器 中 。 虽 然 这 不 足以 让 我 们 画 三 角形 ， 但 是 足够 画 出 一 个 点 。 为 
了 显示 这 个 点 ， 我 们 还 需要 提供 片段 着 色 器 。 为 简单 起 见 ， 我 们 将 这 两 
个 着 色 器 程序 声明 为 字符 串 数组 。 





(#include 列 表 与 之 前 相同 ) 
#define numVAOs 1 一 --- 新 的 定义 





GLuint renderingProgram; 
GLuint vao[numVAOs ]; 


GLuint createShaderProgram() { 


} 


const char *vshaderSource = 
"#version 430 \n" 
"void main(void) \n" 
"{ gl Position = vec4(@.0, 0.0, 0.0, 1.0); }"; 


const char *fshaderSource = 
"#version 430 \n" 
"out vec4 color; \n" 
"void main(void) \n" 
"{ color = vec4(@.0, 0.0, 1.0, 1.0); }"; 


GLuint vShader = glCreateShader(GL_VERTEX_SHADER) ; 











程序 2.2 tad, H) 











个 / 
点 





GLuint fshader = glCreateShader(GL_FRAGMENT_SHADER) ; 


glShaderSource(vShader, 1, &vshaderSource, NULL); 
glShaderSource(fShader, 1, &fshaderSource, NULL); 
glCompileShader(vShader) ; 
glCompileShader (Shader) ; 


GLuint vfProgram = glCreateProgram() ; 
glAttachShader(vfProgram, vShader) ; 
glAttachShader(vfProgram, fShader) ; 
glLinkProgram(vfProgram) ; 


return vfProgram; 


void init(GLFWwindow* window) { 


} 


renderingProgram = createShaderProgram(); 
glGenVertexArrays(numVAOs, vao); 
glBindVertexArray(vao[@]); 


void display(GLFWwindow* window, double currentTime) { 


} 


glUseProgram(renderingProgram); 
glDrawArrays(GL_POINTS, ©, 1); 








...main() 函 数 与 之 前 相同 
程序 看 起 来 只 显示 了 一 个 空 的 窗口 〈《 见 网 2.4) 。 但 仔细 观察 一 
下 ， 会 发 现 窗口 中 央 有 一 个 蓝 色 的 点 《假设 本 页 印刷 精度 足够 ) 。 
OpenGL 中 点 的 默认 大 小 为 1 像素 。 
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图 2.4 程序 2.2 的 输出 效果 





程序 2.2 中 有 很 多 值得 讨论 的 重要 细节 “为 方便 起 见 已 用 颜色 标 
tH) 。 首 先 ， 注 意 其 中 多 次 用 到 的 “Gluint” 这 是 由 OpenGL 提 供 
的 “unsigned int” 的 平台 无 关 简 写 〈 许 多 OpenGL 结 构 体 都 是 整数 类 型 引 
H) 。 接 下 来 ，init(0) 不 再 是 空 函 数 了 现在 它 会 调用 另 一 个 叫 
作 *createShaderProgram” 的 函数 〈 我 们 写 的 ) o “createShaderProgram” P&I 
数 先 定义 了 两 个 字符 串 vshaderSource 和 fshaderSource。 之 后 调用 了 两 次 
CreateShader() 疯 数 ， 创 建 了 类 型 为 GL_VERTEX_SHADER 和 
GL_FRAGMENT_SHADER 的 两 个 着 色 器 。OpenGL 创 建 每 个 着 色 器 对 
象 “〈 初 始 值 为 空 ) 的 时 候 ， 会 返回 一 个 整数 ID 作为 后 面 引 用 它 的 序号 
一 一 我 们 的 代码 将 这 个 ID 存 入 了 vShader 和 fShader 变 量 中 。 之 后 ， 
createShaderProgram() 调 用 了 glShaderSource()， 这 个 函数 用 于 将 GLSL 代 




















码 从 字符 串 载 入 空 着 色 器 对 象 中 。 之 后 ， 用 glCompileShader0 编 译 各 着 
kto glShaderSource) A474 22: (a) 用 来 存放 着 色 器 的 着 色 器 对 
R, b) 着 色 器 源 代 码 中 的 字符 串 数 量 ，《〈c) 包含 源 代 码 的 字符 串 指 
针 ，〈d) 最 后 一 个 没 用 到 的 参数 〈 我 们 稍 后 会 在 补充 章节 说 明 中 解释 
这 个 参数 ) 。 注 意 ， 这 两 次 调用 glCompileShader() 时 都 指明 了 着 色 器 的 
源 代 码 字 符 串 数量 为 “1” 一 一 这 个 参数 也 会 在 补充 说 明 中 解释 。 








之 后 应 用 程序 创建 了 一 个 叫 作 vfProgram 的 程序 对 象 ， 并 储存 指 癌 
它 的 整数 ID 。OpenGL“ 程 序 ? 对 象 包含 一 系列 编译 过 的 着 色 器 ， 这 里 可 
以 看 到 使 用 glCreateProgram() 创 建 程序 对 象 ， 使 用 glAttachShader() 将 着 
色 器 加 入 程序 对 象 ， 之 后 使 用 glLinkProgram() 来 请 求 GLSL 编 译 器 确保 
它们 的 兼容 性 。 


如 前 所 见 ， 在 initO 结 束 后 程序 调用 了 display0。displayO 函 数 所 做 的 
事情 中 包含 调 glUseProgram0， 它 将 含有 两 个 已 编译 着 色 器 的 程序 载 入 
OpenGL 管 线 阶 段 (在 GPU 上 ! ) 。 注 意 glUseProgram0 并 没有 运行 着 色 
器 ， 它 只 是 将 着 色 器 加 载 进 硬件 。 








我 们 稍 后 在 第 4 章 会 看 到 ， 一 般 情 况 下 ， 这 里 C++/OpenGL 将 会 准备 
要 发 送 给 管线 绘制 的 模型 的 顶点 集 。 但 是 本 例 中 ， 由 于 是 第 一 个 着 色 器 
程序 ， 我 们 仅仅 在 顶点 着 色 器 中 硬 编码 了 一 个 顶点 。 因 此， 本 例 中 的 
displayO 函 数 接着 调用 了 glDrawArrays(0) 用 来 启动 管线 处 理 过 程 。 原 始 次 
型 是 GL_POINTS， 仅 用 来 显示 一 个 点 。 

















现在 我 们 来 看 一 下 着 色 器 ， 在 之 前 用 绿色 展示 〈 并 在 之 后 的 解释 中 








又 重复 了 一 过 ) 。 正 如 我 们 所 看 到 的 ， 在 C++/OpenGL 程 序 中 ， 它 们 声 
明 为 字符 串 数组 。 这 是 一 种 笨拙 的 编程 方式 ， 不 过 在 这 个 超 简单 的 例子 
中 足够 了 。 这 个 顶点 着 色 器 是 : 


#version 430 


void main(void) 
{ gl Position = vec4(@.0, 0.0, 0.0, 1.0); } 





第 一 行 指明 了 OpenGL 版 本 ， 这 里 是 4.3。 接 下 来 是 一 个 “main” 函 数 
(我 们 后 面 将 会 看 到 ，GLSL 句 法 上 与 C++ 类 似 ) 。 所 有 顶点 着 色 器 的 
主要 目标 都 是 将 顶点 发 送 给 管线 (正如 之 前 所 说 的 ， 它 会 对 每 个 顶点 进 
行 处 理 ) 。 内 置 变量 gL_Position 用 来 设置 项 点 在 3D 空 间 的 坐标 位 置 ， 并 
发 送 至 下 一 个 管线 阶段 。GLSL 数 据 类 型 vec4 用 来 存储 4 元 组 ， 适 合用 来 
存储 坐标 ，4 元 组 的 前 3 个 值 分 别 表 示 X、Y、Z， 第 4 个 值 在 这 里 设 为 
1.0《〈 第 3 章 将 会 学 习 第 4 个 值 的 用 途 ) 。 本 例 中 ， 顶 点 坐标 硬 编码 于 原 
点 (0,0,0)。 





顶点 接 下 来 将 沿 着 管线 移动 到 光栅 着 色 器 ， 它 们 会 在 这 里 被 转换 成 
像素 位 置 “更 精确 地 说 是 片段 一 一 后 面 会 解释 ) o RARER OTY 
Bo) 到 达 片 段 着 色 器 : 


#version 430 
out vec4 color; 


void main(void) 
{ color = vec4(@.0, 0.0, 1.0, 1.0); } 





所 有 片段 着 色 器 的 目的 都 是 给 将 要 展示 的 像素 赋予 RGB 颜色 。 在 本 
例 中 所 指定 的 输出 颜色 值 (0,0,1) 是 蓝 色 《第 4 个 值 1.0 是 不 透明 度 ) 。 注 
意 这 里 的 “out” 标 签 表 明 color 变 量 是 输出 变量 。 (在 顶点 着 色 器 中 并 不 


必须 给 gL_Position 指 定 “out” 标 签 ， 因 为 gL_Position 是 预定 义 的 输出 变 
) 


an 部 


代码 中 还 有 一 处 我 们 没有 讨论 的 细节 ， 即 initO 函 数 中 的 最 后 两 行 
《以 红色 显示 ) 。 它 们 看 起 来 可 能 有 些 神秘 。 我 们 在 第 4 章 中 将 会 看 
到 ， 当 准备 将 数据 集 发 送 给 管线 时 是 以 缓冲 区 形式 发 送 的 。 这 些 缓冲 区 
最 后 都 会 被 存 入 顶点 数组 对 象 (Vertex Array Object, VAO) P. Æ% 
例 中 ， 我 们 辣 顶 点 着 色 器 中 人 硬 编码 了 一 个 点 ， 因 此 我 们 不 需要 任何 缓冲 
区 。 但 是 ， 即 使 应 用 程序 完全 没有 用 到 任何 缓冲 区 ，OpenGL 仍 然 需 要 
在 使 用 着 色 器 的 时 候 至 少 有 一 个 创建 好 的 VAO， 所 以 这 两 行 用 来 创建 
OpenGL 要 求 的 VAO。 


最 后 的 问题 就 是 从 顶点 着色 器 出 来 的 顶点 是 如 何 变 成 片段 着 色 器 中 
的 像素 的 。 回 忆 一 下 图 2.2 中 ， 在 顶点 处 理 和 像素 处 理 中 间 存 在 着 光栅 
化 阶段 。 正 是 在 这 个 阶段 中 图 元 〈 如 点 或 三 角形 ) 转换 成 了 像素 集合 。 
OpenGL 中 默认 扣 的 大 小 为 1 像 系 ， 这 残 是 为 什么 我 们 的 日 点 最 终 泻 染 成 
SMR 





让 我 们 将 下 面 的 命令 加 入 display0O 函 数 中 ， 就 放 在 调用 
HDrawArrays() 之 前 : 


glPointSize(30.0f); 


现在 ， 当 光栅 化 阶段 从 顶点 着 色 器 收 到 顶点 时 ， 它 会 为 一 个 大 小 是 
30 像 素 的 点 设置 像素 颜色 值 。 输 出 的 结果 展示 在 图 2.5 中 ( 见 彩 择 〉。 
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图 2.5 ”改变 glPointSize 


让 我 们 继续 观察 剩 下 的 OpenGL 管 线 。 
2.1.3 HEADE EA 


我 们 在 第 12 章 中 介绍 曲面 细 分 。 可 编程 曲面 细 分 阶段 是 最 近 加 入 
OpenGL 〈 在 4.0 版 中 ) 的 功能 。 它 提供 了 一 个 曲面 细 分 着 色 絮 用 以 生成 
大 量 三 角形 ， 通 常 是 网 格 形式 。 同 时 也 提供 一 些 可 以 以 各 种 方式 操作 这 
些 三 角形 的 工具 。 例 如 ， 程 友 员 可 能 需要 以 图 2.6 展 示 的 方式 操作 一 个 
曲面 细 分 过 的 三 角形 网 格 。 














图 2.6 ”曲面 细 分 着 色 器 生成 的 网 格 

















当 在 简单 形状 上 需要 很 多 顶点 时 ， 曲 面 细 分 着 色 峰 就 能 发 挥 作用 
了 ， 如 在 方形 区 域 或 曲面 上 。 稍 后 我 们 会 看 到 ， 包 在 生成 复杂 地 形 时 也 
很 有 用 。 对 于 这 种 情况 ， 有 时 用 GPU 中 的 曲面 细 分 着 色 器 在 硬件 里 生成 
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2.1.4 几何 着 色 器 


我 们 在 第 13 章 中 介绍 了 几何 着 色 器 阶段 。 顶 点 着 色 器 赋予 程序 员 一 
次 操作 一 个 顶点 的 能 力 〈“ 按 顶点 处理) ， 厂 段 着 色 右 (和 后 会 看 到 ) 
允许 一 次 操作 一 个 像素 〈“ 按 片段 ?处 理 ) ， 几 何 着 色 器 赋予 了 一 次 操作 
一 个 图 元 的 能 力 《〈“ 按 图 元 ”处 理 ) 。 





回顾 前 文 提 到 最 通用 的 图 元 是 三 角形 。 当 我 们 到 达 几 何 着 色 峰 阶段 
时 ， 管 线 肯定 已 经 完成 了 将 项 点 组 合 为 三 角形 的 过 程 ( 这 个 过 程 叫 作 图 
TR) 。 接 下 来 几何 着 色 器 会 让 程序 员 可 以 同时 访问 每 个 三 角形 的 所 
有 顶点。 














按 图 元 处 理 有 很 多 用 途 ， 既 可 以 让 图 元 变形 ， 比 如 拉 伸 或 者 缩小 ， 
还 可 以 删除 一 些 图 元 ， 从 而 在 泻 染 的 物体 上 产生 * 洞 ”一 一 这 是 一 种 将 简 
单 模型 转化 为 复杂 模型 的 方法 。 





几何 着 色 器 也 提供 了 生成 额外 图 元 的 方法 。 这 些 方法 也 打开 了 通过 
转换 简单 模型 而 得 到 复杂 模型 的 大 门 。 几 何 着 色 需 有 一 种 有 趣 的 用 法 ， 
就 是 在 物体 上 增加 表面 纹理 ， 如 凸 起 、 钱 甚至 “ 毛 友 ”"。 考 虑 图 2.7 所 示 的 


简单 环 面 〈 本 书后 面 会 介绍 如 何 生成 它 ) 。 环 面 的 表面 由 上 百 个 三 角形 
构成 。 如 果 我 们 用 几何 着 色 器 对 每 个 三 角形 外 面 增加 一 个 额外 的 三 角 

形 ， 就 会 得 到 如 图 2.8 所 示 的 结果 。 这 个 “ 鳞 环 面 *" 如 果 是 从 C++/OpenGL 
应 用 程序 那 边 从 零 建 模 生 成 ， 代 价 就 大 了 。 








图 2.7” 环 面 模型 





图 2.8 几何 着 色 器 修改 后 的 环 面 





在 曲面 细 分 阶段 已 经 给 程序 员 同 时 访问 模型 中 所 有 项 点 的 能 力 后 ， 
再 提供 一 个 按 图 元 运算 的 着 色 器 阶段 可 能 看 起 来 有 点 多 余 。 它 们 的 区 别 
是 ， 曲 面 细 分 只 在 非常 少数 情况 下 提供 了 这 个 能 力 一 一 尤其 在 模型 是 由 
曲面 细 分 器 生成 的 三 角形 网 格 时 。 它 并 没有 提供 同时 访问 所 有 顶点 ， 即 








任何 从 C++ 用 缓冲 区 传 来 的 顶点 的 能 力 。 
2.1.5 ”光栅 化 


最 终 ， 我 们 3D 世 界 中 的 点 、 三 角形 、 闫 色 等 全 部 需要 展现 在 一 个 
2D 显 示 融 上 。 这 个 2D 屏 硕 由 光栅 一 一 矩形 像素 阵列 组 成 。 





当 3D 物 体 光 栅 化 后 ，OpenGL 将 物体 中 的 图 元 “通常 是 三 角形 〉 转 
化 为 片段 。 片 段 拥 有 关于 像素 的 信息 。 光 栅 化 过 程 确定 了 用 以 显示 3 个 
顶点 所 确定 的 三 角形 的 所 有 像素 需要 绘制 的 位 置 。 








光栅 化 过 程 开 始 时 先 对 三 角形 的 每 对 顶点 进行 插值 。 插 值 过 程 可 以 
通过 选项 调节 。 就 目前 而 言 ， 使 用 图 2.9 所 示 的 简单 的 线性 插值 就 够 
了 。 原 本 的 3 个 项 后 标记 为 红色 〔 见 彩 择 )。 








图 2.9 ”光栅 化 ( 步 又 1) 


如 果 光 栅 化 过 程 到 此 为 止 ， 那 么 呈现 出 的 图 像 将 会 是 线 框 模型 。 呈 
现 线 框 模型 也 是 OpenGL 中 的 一 个 选项 。 通 过 在 display() 函 数 中 


gDrawArraysO 调 用 之 前 添加 如 下 命令 : 


glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); 


如 果 2.1.4 小 节 中 的 环 面 使 用 了 这 行 额外 代码 ， 它 将 会 看 起 来 如 图 
2.10 所 示 。 











图 2.10 ”使 用 线 框 模型 泻 染 的 环 面 











如 果 我 们 不 加 入 之 前 的 那 一 行 代 码 (或 者 我 们 在 其 中 使 用 GL_FILL 
而 非 GL_LINE)〉， 插 值 过 程 将 会 继续 沿 着 光栅 线 填充 三 角形 的 内 部 ， 如 
图 2.11 所 示 。 当 应 用 于 环 面 时 会 产生 一 个 完全 光栅 化 的 “实心 ? 环 面 ， 如 
图 2.12《〈 左 ) 所 示 。 请 注意 ， 在 这 种 情况 下 ， 环 面 的 整体 形状 和 曲率 不 
明显 一 一 这 是 因为 我 们 没有 包括 任何 纹理 或 照明 技术 ， 因 此 它 看 起 来 
是 “ 平 * 的 。 图 2.12( 右 ) 是 同样 的 “ 平 * 环 面 合 加 了 线 框 模型 。 前 面 图 2.7 
所 示 的 环 面包 括 了 照明 效果 ， 因 此 更 清晰 地 显示 了 环 面 的 形状 。 我 们 将 


在 第 7 章 学 习 照 明 。 














图 2.11 ”完全 光栅 化 的 三 角形 




















图 2.12 ” 环 面 的 完全 光栅 化 图 元 渲染 〈 左 ) 和 使 用 线 框 车 加 〈 右 ) 





在 本 章 后 面 我 们 将 看 到 ， 光 机 化 不 仪 可 以 对 像素 插值 。 任 何 项 点 着 
色 器 输出 的 变量 和 厂 段 着 色 器 的 输入 变量 都 可 以 基于 对 应 的 像素 进行 插 
值 。 我 们 将 会 使 用 该 功能 生成 平滑 的 颜色 渐变 ， 实 现 真实 光照 以 及 许多 
其 他 效果 。 








2.1.6 ”片段 着 色 器 
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程序 2.2 中 看 到 了 片段 着 色 器 示例 。 在 程序 2.2 中 ， 片 段 着 色 器 仅 将 输出 
便 编码 为 特定 值 ， 从 而 为 每 个 输出 的 像素 冉 予 相同 的 颜色 。 不 过 GLSL 
为 我 们 提供 了 其 他 计算 颜色 的 方式 ， 用 以 表现 无 穷 的 创造 力 。 











一 个 简单 的 例子 就 是 基于 像素 位 置 决定 输出 颜色 。 回 忆 我 们 在 顶点 
着 色 器 中， 顶点 的 输出 坐标 使 用 了 预定 义 变量 gl_Position。 在 片段 着 色 
器 中 ， 同 样 有 一 个 变量 让 程序 员 可 以 访问 输入 卢 段 的 坐标 ， 叫 作 
8&_FragCoord。 我 们 可 以 通过 修改 程序 2.2 中 的 片段 着 色 器 ， 让 和 它 使 用 
gl FragCoord (在 本 例 中 通过 GLSL 属 性 选择 语法 引用 它 的 X 坐 标 〉 基 于 
位 置 设置 每 个 像素 的 颜色 ， 如 : 





#version 430 
out vec4 color; 
void main(void) 


{ if (gl_FragCoord.x < 200) color = vec4(1.0, 0.0, 0.0, 1.0); else color = 
vec4(@.0, 0.0, 1.0, 1.0); 
} 





如 果 我 们 像 在 2.1.2 小 市 末尾 那样 增 大 GL_PointSize， 演 染 的 点 的 像 
素颜 色 将 会 以 坐标 变 人 于 200 时 是 红色 ， 和 否则 就 是 蓝 色 ， 如 
图 2.13 所 示 “〈 见 彩 插 ) 。 








|| Chapter2 - program2 








图 2.13 “片段 着 色 器 颜色 变化 





2.1.7 像素 操作 


当 我 们 在 display0 方 法 中 使 用 ee ad 命令 绘制 场景 中 的 物体 
时 ， 我 们 通常 期 望 前 面 的 物体 挡住 后 面 的 物体 。 这 也 可 以 推广 到 物体 上 自 
身 ， 我 们 通常 期 望 看 到 物体 的 正面 对 着 我 们 ， 而 不 是 背 对 我 们 。 


为 了 实现 这 个 效果 ， 我 们 需要 隐藏 面 消 除 (Hidden Surface 
Removal, HSR) 。 基 于 场景 需要 的 不 同 效果 ，OpenGL 可 以 进行 一 系列 
不 同 的 HSR 操 作 。 虽 然 这 个 阶段 不 可 编程 ， 但 是 理解 它 的 工作 原理 是 非 
党 重要 的 。 我 们 不 仅 需 要 正确 地 配置 它 ， 之 后 还 需要 在 给 场景 添加 阴影 
时 对 它 进行 进一步 操作 。 








OpenGL 通 过 精巧 地 协调 两 个 缓冲 区 完成 隐藏 面 消除 ， 顾 色 绥 冲 区 
(我 们 之 前 讨论 过 ) 和 深度 缓冲 区 ee Z-buffer) 。 aver 
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最 终 会 被 写 入 屏幕 。 当 多 个 对 
象 占 据 颜 色 缓冲 区 中 的 相同 像素 时 ， 必 须根 据 哪个 对 象 最 接近 观察 者 来 
确定 保留 哪个 像素 颜色 。 





隐藏 面 消 除 按照 如 下 步骤 完成 。 





(1) 在 每 个 场景 泻 染 前 ， 深 度 缓 冲 区 全 部 初始 化 为 表示 最 大 深度 
的 值 。 


(2) 当 像素 颜色 由 片段 着 色 器 输出 时 ， 计 算 它 到 观察 者 的 距离 。 





(3) 如 果 距 离 小 于 深度 缓冲 区 存储 的 值 《 对 当前 像素 ) ， 那 么 用 
当前 像 系 颜色 丛 换 颜色 缓冲 区 中 的 颜色 ， 同 时 用 当前 距离 答 换 深度 缓冲 
区 中 的 值 ， 否 则 抛 痉 当前 像素 。 


这 个 过 程 叫 作 Z-Buffer 算 法 ， 如 图 2.14 所 示 。 


Color [ ] [ ] colorBuf = new Color [pixelRows][pixelCols]; 
double [ ] [] depthBuf = new double [pixelRows][pixelCols]; 
for (each row and column) // 初始 化 颜色 和 深度 缓冲 区 
{ colorBuf [row][col] = backgroundColor; 

depthBuf [row][col] = far away; 


for (each shape) / 当 新 的 像素 更 近 时 ， 更 新 缓冲 区 
{ for (each pixel in the shape) 
{ if (depth at pixel < depthBuf value) 
{ depthBuf [pixel.row][pixel.col] = depth at pixel; 
colorBuf [pixel.row][pixel.col] = color at pixel; 





return colorBuf; 





图 2.14 Z-buffer 算 法 
2.2 ”检测 OpenGL 和 GLSL 错 误 


编译 和 运行 GLSL 代 码 与 普通 编码 的 过 程 不 同 ，GLSL 编 译 发 生 在 
C++ 运行 时 。 另 外 一 个 复杂 的 地 方 是 GLSL 人 代码 并 没有 运行 在 CPU 中 
〈 它 运行 在 GPU 上 ) ， 因 此 操作 系统 不 总 是 能 够 捕获 OpenGL 运 行 时 的 
错误 。 以 上 这 些 使 得 调试 变 得 很 困难 ， 因 为 常常 很 难 检测 着 色 器 是 否 
败 ， 以 及 为 什么 失败 。 





程序 2.3 展 示 了 用 于 捕获 和 显示 GLSL 错 误 的 模块 。 其 中 GLSL 函 数 
gGetShaderiv0 和 glGetProgramivO 用 于 提供 有 关 编 译 过 的 GLSL 着 色 器 和 
程序 的 信息 。 还 有 之 前 程序 2.2 中 的 createShaderProgram() 函 数 ， 不 过 加 
入 了 错误 检测 的 调用 。 








程序 2.3 包 含 如 下 3 个 实用 程序 。 


e checkOpenGLError: 检查 OpenGL 错 误 标 志 ， 即 是 否 发 生 OpenGL 错 
误 。 

e printShaderLog: 当 GLSL 编 译 失 败 时 ， 显 示 OpenGEL 日志 内 容 。 

e printProgramLog: 当 GLSL 链 接 失 败 时 ， 显 示 OpenGL 日 志 内 容 。 





checkOpenGLErrorO 既 用 于 检测 GLSL 编 译 错误 ， 又 用 于 检测 
OpenGL 运 行 时 的 错误 ， 因 此 我 们 强烈 建议 在 整个 C++/OpenGL 应 用 程序 
开发 过 程 中 使 用 它 。 例 如 ， 在 之 前 的 程序 2.2 中 ， 对 于 glCompileShader() 
和 glLinkProgram() 的 调用 很 容易 用 程序 2.3 的 代码 进行 加 强 ， 来 确认 所 有 





的 拼写 错误 和 编译 错误 都 能 被 捕获 到 ， 同 时 报告 其 原因 。 





ee PAR GLSL 错 误 并 不 会 导致 C++ 程 
序 朋 溃 。 因 此 ， 除 非 程序 员 通 过 步 进 找 到 错误 发 生 的 点 ， 否 则 调试 会 非 
常 困难 。 





程序 2.3 ”用 以 捕获 GLSL 错 误 的 模块 


void printShaderLog(GLuint shader) { 
int len = @; 
int chWrittn = 6; 
char *log; 
glGetShaderiv(shader, GL_INFO_LOG_LENGTH, &len); 
if (len > 6) { 
log = (char *)malloc(len); 
glGetShaderInfoLog(shader, len, &chwrittn, log); 
cout << "Shader Info Log: " << log << endl; 
free(log); 
} } 


void printProgramLog(int prog) { 
int len = 0; 
int chWrittn = 6; 
char *log; 
glGetProgramiv(prog, GL_INFO_LOG_LENGTH, &len); 


if (len > 6) { 
log = (char *)malloc(len); 
glGetProgramInfoLog(prog, len, &chwrittn, log); 
cout << "Program Info Log: " << log << endl; 
free(log); 
} } 


bool checkOpenGLError() { 

bool foundError = false; 

int glErr = glGetError(); 

while (glErr != GL_NO_ ERROR) { 
cout << "glError: " << glErr << endl; 
foundError = true; 
glErr = glGetError(); 

} 


return foundError; 





检测 OpengGL 错 误 的 示例 如 下 : 


GLuint createShaderProgram() { 
GLint vertCompiled; 
GLint fragCompiled; 
GLint linked; 











// 捕获 编译 着 色 器 时 的 错误 














glCompileShader(vShader) ; 
checkOpenGLError(); 
glGetShaderiv(vShader, GL_COMPILE_STATUS, &vertCompiled) ; 
if (vertCompiled != 1) { 
cout << "vertex compilation failed" << endl; 
printShaderLog(vShader) ; 


} 


glCompileShader(fShader) ; 
checkOpenGLError(); 
glGetShaderiv(fShader, GL_COMPILE_STATUS, &fragCompiled) ; 
if (fragCompiled != 1) { 
cout << "fragment compilation failed" << endl; 
printShaderLog(fShader) ; 


} 
// 捕获 链接 着 色 器 时 的 错误 




















glAttachShader(vfProgram, vShader) ; 
glAttachShader(vfProgram, fShader) ; 
glLinkProgram(vfProgram) ; 
checkOpenGLError(); 
glGetProgramiv(vfProgram, GL_LINK_STATUS, &linked); 
if (linked != 1) { 
cout << "linking failed" << endl; 
printProgramLog(vfProgram) ; 


} 


return vfProgram; 
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运行 时 错误 的 第 见 结果 是 输出 屏幕 上 完全 空 日 ， 根 本 没有 输出 。 即 使 是 
着 色 器 中 的 一 个 小 拼写 错误 也 可 能 导致 这 种 结果 ， 这 样 就 很 难 断 定 是 哪 





个 管线 阶段 发 生 了 错误 。 没 有 任何 输出 的 情况 下 ， 找 到 错误 的 成 因 就 像 
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色 。 如 果 后 来 的 输出 中 的 几何 形状 正确 《但 是 全 是 赣 色 ) ， 那 么 顶点 着 
色 需 应 该 是 正确 的 ， 错 误 应 该 发 生 在 片段 着 色 需 。 如 果 输 出 的 仍然 是 空 
白 屏 幕 ， 那 错误 很 可 能 发 生 在 管线 的 更 早期 ， 璧 如 顶点 着 色 需 。 





在 附录 C 中 ， 我 们 展示 了 另 一 种 有 用 的 调试 工具 ， 叫 作 Nsight， 适 
用 于 特定 型 号 Nvidia 显卡 的 机 器 。 


2.3 ”从 文件 读 取 GLSL 源 代码 
到 此 为 上 ，GLSL 着 色 器 代码 已 经 内 联 存储 在 字符 串 中 了 。 当 程序 


变 得 更 复杂 时 ， 这 么 做 就 不 实际 了 。 我 们 应 当 将 我 们 的 着 色 器 代码 存在 
文件 中 并 读 入 它们 。 





读 入 文本 文件 是 基础 C++ 技能 ， 我 们 在 此 就 不 葡 述 了 。 但 是 ， 为 实 
用 起 见 ， 用 于 读 取 着 色 器 的 代码 readShaderSource0 在 程序 2.4 中 提供 。 它 
读 取 着 色 器 文本 文件 并 返回 一 个 字符 串 数组 ， 其 中 每 个 字符 串 是 文件 中 
的 一 行文 本 。 然 后 根据 读 入 的 行 数 确定 该 数组 的 大 小 。 注 意 ， 
createShaderProgram() 在 这 里 蔡 换 了 程序 2.2 中 的 版 本 。 在 本 例 中 ， 顶 点 
着 色 器 和 片段 着 色 器 代码 现在 分 别 放 在 文本 文 
件 “vertShader.glsl” 和 “fragShader.glsl”* 中 。 





星 序 2.4 ”从 文件 读 取 GLSL 源 文件 


> 





(....#includes 与 之 前 相同 ，main()，display()，init() 也 与 之 前 相同 ， 同 时 加 入 如 下 
代码 ...) 

#include <string> 

#include <iostream> 

#include <fstream> 


string readShaderSource(const char *filePath) { 

string content; 

ifstream fileStream(filePath, ios::in); 

string line = ""; 

while (!fileStream.eof()) { 
getline(fileStream, line); 
content.append(line + "\n"); 

} 

fileStream.close(); 

return content; 


} 


GLuint createShaderProgram() { 
(.. .与 之 前 相同 ， 同 时 加 入 如 下 代码 ...) 
string vertShaderStr = readShaderSource("vertShader.gls1") ; 
string fragShaderStr = readShaderSource("fragShader.gls1") ; 


const char *vertShaderSrc vertShaderStr.c_str(); 
const char *fragShaderSrc fragShaderStr.c_str(); 


glShaderSource(vShader, 1, &vertShaderSrc, NULL); 
glShaderSource(fShader, 1, &fragShaderSrc, NULL); 


(构建 如 前 的 泻 染 程序 ) 











2.4 从 顶点 构建 对 象 


最 终 我 们 想 要 绘制 的 不 止 是 一 个 单独 的 点 ， 而 是 想 要 绘制 由 很 多 顶 
点 组 成 的 对 象 。 本 书 的 大 部 分 章节 将 会 致力 于 这 一 主题 。 现 在 我 们 从 一 
人 简单 的 例子 开始 一 一 我 们 将 会 定义 3 个 顶点 ， 并 用 它们 绘制 一 个 三 角 
形 ， 如 图 2.15 所 示 。 
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图 2.15 ”绘制 简单 三 角形 





我 们 可 以 通过 对 程序 2.2〈 事 实 上 是 从 文件 读 入 着 色 器 的 程序 2.4) 
进行 两 个 小 改动 来 实现 绘制 三 角形 : (a) 修改 顶点 着 色 器 ， 以 便 将 3 个 
不 同 的 点 输出 到 后 续 的 管线 阶段 ，(b) 修改 glDrawArrays0 调 用 ， 指 定 
3 个 顶点 。 





在 C++/OpenGL 应 用 程序 中 [特别 是 在 glDrawArraysO 调 用 中 」 我 们 
S€ J GL_TRIANGLES (而 非 GL_POINTS) ， 同 时 也 指定 了 管线 中 有 
3 个 顶点 。 这 样 顶 点 着 色 器 会 在 每 个 迭代 运行 3 遍 ， 内 置 变量 g]_VertexID 
SAM (初始 值 为 0;。 通 过 检测 gl_VertexID 的 值 ， 着 色 器 设计 为 可 以 
在 每 次 运行 时 输出 不 同 的 点 。 前 面 说 到 这 3 个 点 之 后 会 经 过 光栅 化 阶 
段 ， 生 成 一 个 填充 过 的 三 角形 。 程 序 的 改动 显示 在 程序 2.5 中 (余下 的 
代码 与 之 前 在 程序 2.4 中 的 相同 ) 。 














程序 2.5 绘制 三 角形 











顶点 着 色 器 





#version 430 
void main(void) 
{ if (gl_VertexID == @) gl Position = vec4( 0.25, -@.25, 0.0, 1.0); 
else if (gl_VertexID == 1) gl Position = vec4(-@.25, -@.25, 0.0, 1.0); 


else gl Position = vec4( 0.25, 0.25, 0.0, 1.0); 























C++/OpenGL 应 用 程序 一 在 display() 函 数 中 


glDrawArrays(GL_TRIANGLES, ©, 3); 








2.5 Iya) H] 





本 书 中 的 很 多 技术 可 以 用 于 动画 。 当 场景 中 的 物体 移动 或 改变 时 ， 
场景 会 被 重复 演 染 以 实时 反映 这 些 改动 。 





回顾 2.1.1 小 节 中 ， 我 们 构建 的 main0 函 数 只 调用 了 initO0 一 次 ， 之 后 
就 重复 调用 display()。 因 此 虽然 前 面 所 有 的 例子 看 起 来 都 是 静态 绘制 的 
场景 ， 但 实际 上 main() 函 数 中 的 循环 会 让 它们 一 次 又 一 次 地 绘制 。 





因此 ，main(0) 函 数 的 结构 已 经 可 以 支持 动画 了 。 我 们 只 需要 设计 
display0) 函 数 来 随时 间 改 变 绘制 的 东西 。 场 景 的 每 一 次 绘制 都 叫 作 一 
帧 ， 调 用 display0) 的 频率 叫 作 帧 京 。 在 程序 逻辑 中 移动 的 速率 可 以 通过 
目前 一 帧 到 目前 经 过 的 时 间 来 控制 (这 就 是 为 什么 我 们 会 
将 “currentTime” 作 为 display0 函 数 的 参数 ) 。 








程序 2.6 中 展示 了 动画 示例 。 我 们 使 用 了 程序 2.5 中 的 三 角形 ， 并 给 
它 加 入 了 先 向 右 ， 再 问 左 ， 往 复 移动 的 动画 。 在 本 例 中 ， 我 们 不 考虑 经 
过 的 时 间 ， 因 此 三 角形 的 移动 或 快 或 悍 ， 基 于 运行 计算 机 的 处 理 速度 。 
在 未 来 的 示例 中 ， 我 们 将 会 使 用 经 过 的 时 间 来 确保 无 论 在 什么 配置 的 计 
算 机 上 运行 ， 动 男 都 保持 以 同样 的 速度 播放 。 





在 程序 2.6 中 ， 程 序 的 display0) 方 法 维持 一 个 变量 “x” 用 于 偏 移 三 角形 
的 X 轴 位 置 。 每 当 display0 调 用 时 ， 它 的 值 都 会 改变 《因此 每 帧 都 不 
ED 。 同 时 每 当 它 到 达 1.0 或 者 -1.0 时 ， 都 会 改变 方向 。 在 x 中 的 值 会 被 
复制 到 顶点 着 色 器 的 “offset”*” 变 量 中 。 执 行 这 个 复制 的 机 制 叫 作 Uniform 
变量 (统一 变量 ) ， 稍 后 我 们 会 在 第 4 章 中 学 习 它 。 目 前 不 必 了 解 统一 
变量 的 细节 。 现 在 ， 只 需要 注意 C++/OpenGL 应 用 程序 先 调用 
和 GetUniformLocation() 获 取 指 向 “offset* 变 量 的 指针 ， 之 后 调用 
生 ProgramUniform1f() 将 x 的 值 复制 给 offset。 之 后 顶点 着 色 器 会 将 offset 加 
给 所 绘制 三 角形 的 X 坐 标 。 注 意 ， 每 次 调用 display0O 时 背景 都 会 被 清除 ， 
以 避免 三 角形 移动 时 留 下 一 串 轨 迹 。 图 2.16 展 示 了 3 个 时 间 点 显示 的 图 
像 (当然 ， 书 中 的 静态 图 是 无 法 展示 移动 的 )。 
































程序 2.6 ”简单 动画 示例 


C++/OpenGL 应 用 程序 : 





// #includes 与 之 前 相同 ， 定 义 也 与 之 前 相同 ， 同 时 加 入 如 下 代码 : 
float x = 0.0£; // 三 角形 在 x 轴 的 位 置 
float inc = 0.01f; // 移动 三 角形 的 偏 移 量 


void display (GLFWwindow* window, double currentTime) { 
glClear (GL DEPTH BUFFER BIT); 
glClearColor(0.0, 0.0, 0.0, 1.0); 
glClear (GL COLOR BUFFER BIT) ; // 每 次 将 背景 清除 为 黑色 


glUseProgram(renderingProgram) ; 


x += inc; // 切换 至 让 三 角形 向 右 移动 

if (x > 1.0£) ince = -0.01f; // 沿 x 轴 移动 三 角形 

if (x < -1.0f) inc = 0.01f; // 切换 至 让 三 角形 向 左 移动 

GLuint offsetLoc = glGetUniformLocation(renderingProgram, "offset");  // 获取 "offset" 指针 
glProgramUniformlf (renderingProgram, offsetLoc, x); // 将 "x" 中 的 值 传 给 "offset" 






glDrawArrays (GL_TRIANGLES, 0,3); 


.// 其 余 函 数 同 前 例 
} 


#version 430 
uniform float offset; 
void main (void) 
{ if (gl_VertexID == 0) gl_Position = vec4( 0.25 + offset, -0.25, 0.0, 1.0); 
else if (gl_VertexID == 1) gl_Position = vec4(-0.25 + offset, -0.25, 0.0, 1.0); 
else gl_ Position = vec4( 0.25 + offset, 0.25, 0.0, 1.0); 
} 


TER, BR SUSI PASS ob, BEANIE Edisplay() K Be IF 
头 添加 了 这 行 代码 : 


glClear(GL_DEPTH_BUFFER_BIT); 
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图 2.16 移动 的 三 角形 动画 

















里 然 在 本 例 中 并 不 是 必需 的 ， 我 们 仍然 把 它 加 在 这 里 ， 同 时 它 会 在 
之 后 的 大 多 数 应 用 程序 中 存在 。 回 忆 2.1.7 小 节 中 讨论 的 ， 隐 藏 面 消 除 需 
要 同时 用 到 颜色 绥 冲 区 和 深度 缓冲 区 。 当 我 们 后 面 渐渐 地 开始 绘制 更 复 
杂 的 3D 场 景 时 ， 每 帧 初始 化 (清除 ) 深度 缓冲 区 就 是 必要 的 ， 尤 其 是 
对 于 动画 场景 ， 要 确保 深度 对 比 不 会 受 旧 的 深度 数据 影响 。 从 前 面 的 例 
子 中 可 以 明显 看 出 ， 清 除 深 度 缓冲 区 的 命令 与 清除 颜色 缓冲 区 的 命令 基 
本 相同 。 











2.6 C++ 代码 文件 结构 


目前 为 止 ， 我 们 的 所 有 C++/OpenGL 应 用 程序 代码 都 放 在 同一 个 叫 
作 “main.cpp” 的 文件 中 ，GLSL 着 色 器 代码 放 
在 “vertShader.glsl” 和 “fragShader.glsl* 文 件 中 。 我 们 承认 在 main.cpp 中 塞 
进 很 多 应 用 代码 不 是 最 佳 实践 ， 但 我 们 在 本 书 中 采用 这 个 约定 ， 以 便于 
在 每 个 例子 中 ， 哪 个 文件 包含 这 个 例子 中 主要 的 C++/OpenGL 代 码 这 件 
事 都 很 清楚 。 在 本 教材 中 ， 主 要 的 C++/OpenGL 文 件 总 是 叫 
作 “main.cpp”。 在 实践 中 ， 应 用 程序 当然 应 该 模块 化 ， 以 适当 对 应 应 用 
的 各 功能 。 


但 是 ， 当 我 们 继续 学 习 时 ， 我 们 会 遇 到 一 些 情况 。 在 这 些 情况 下 ， 
我 们 会 创建 一 些 实 用 的 模块 ， 并 在 不 同 的 应 用 程序 中 使 用 。 当 时 机 适 
当 ， 我 们 会 将 这 些 模 块 分 离 到 单独 的 文件 中 以 便 重 用 。 例 如 ， 稍 后 我 们 
会 定义 一 个 Sphere 类 。 这 个 类 会 在 很 多 例子 中 用 到 ， 因 此 和 它 会 分 到 它 自 
己 的 文件 〈Sphere.cpp 和 Sphere.h) F. 


相似 地 ， 当 我 们 遇 到 需要 重用 函数 的 时 候 ， 我 们 会 把 它们 放 
进 “Utils.cpp”( 与 “Utils.h” 关 联 〉。 我 们 已 经 看 到 好 几 个 适合 放 
进 “Utils.cpp” 的 函数 了 : 2.2 节 中 描述 的 错误 检测 模块 和 2.3 节 中 描述 的 用 
来 读 入 GLSL 着 色 器 的 函数 。 后 者 非常 适合 重 载 ， 
如 “createShaderProgram()” 可 以 对 应 用 中 所 有 可 能 的 管线 着 色 器 组 合 进 行 
定义 : 











e GLuint Utils::createShaderProgram(const char *vp, const char *fp) 
e GLuint Utils::createShaderProgram(const char *vp, const char *gp, const 


char *fp) 

e GLuint Utils::createShaderProgram(const char *vp, const char *tCS, cons 
t char* tES, const char *fp) 

e GLuint Utils::createShaderProgram(const char *vp, const char *tCS, cons 
t char* tES, const char *gp, 

const char *fp) 





DAES AR ASR A SCHEME T MAE a A BS a RE 
序 。 第 二 个 支持 使 用 了 项 点 着 色 器 、 几 何 着 色 器 和 片段 着 色 器 的 情况 。 
第 三 个 支持 用 了 顶点 着 色 器 、 曲 面 细 分 着 色 器 和 片段 着 色 器 的 情况 。 第 
四 个 文 持 用 了 顶点 着 色 器 、 曲 面 细 分 着 色 器 、 几 何 着 色 器 和 片段 着 色 需 
的 情况 。 每 个 条 目 中 ， 接 受 的 参数 都 包含 着 色 器 代码 的 GLSL 文 件 路 
径 。 例 如 ， 如 下 调用 使 用 了 其 中 一 个 重 载 函 数 ， 以 编译 并 链接 包含 项 后 
着 色 器 和 片段 着 色 器 的 管线 。 编 译 链接 后 的 程序 被 放 在 变 


量 “renderingProgram” 中 : 








renderingProgram = Utils::createShaderProgram("vertShader.glsl", "fragShad 





er.glsl"); 


这 些 createShaderProgram0 实 现 都 可 以 在 随 书 附 赠 的 配套 资源 中 找 
到 《在 “Utils.cpp” 文 件 中 ) ， 同 时 它们 都 包含 了 2.2 节 中 的 错误 处 理 。 它 
们 并 没有 什么 新 内 容 ， 只 是 用 这 种 方式 组 织 以 便 使 用 。 随 着 我 们 继续 癌 
前 推进 本 书 ， 会 有 更 多 相似 的 函数 加 入 Utils.cpp。 我 们 强烈 鼓励 读者 阅 
读 配 套 资 源 中 的 Utils.cpp 文 件 ， 甚 至 有 需要 时 可 在 其 中 加 入 函数 。 配 套 
资源 中 的 程序 是 根据 学 习 本 书 的 方法 构建 的 ， 因 此 了 解 它们 的 结构 应 当 
有 助 加 强 自 己 对 书 中 内 容 的 理解 。 




















我 们 对 于 在 “Utils.cpp” 文 件 中 的 函数 ， 都 以 静态 函数 进行 实现 ， 因 
此 不 需要 实例 化 Utils 类 。 基 于 正在 开发 的 系统 架构 ， 读 者 可 能 会 倾 癌 于 


使 用 实例 方法 甚至 独立 函数 实现 它们 。 


我 们 所 有 的 着 色 器 文件 都 使 用 “.glsl* 后 级 。 
补充 说 明 


在 本 章 中 ， 还 有 很 多 我 们 没有 讨论 到 的 OpenGL 管 线 细节 。 我 们 略 
过 了 许多 内 部 阶段 ， 同 时 完全 省 略 了 纹理 的 处 理 。 我 们 在 本 章 的 目标 
和 是， 对 后 面 要 用 来 编码 的 框 锅 有 尽 可 能 简单 的 整体 印象 。 当 我 们 继续 学 
习 时 ， 会 学 到 更 多 的 细节 。 同 时 我 们 也 推迟 了 展示 曲面 细 分 着 色 右 和 几 
何 着 色 右 的 代码 。 在 之 后 的 革 市 中 ， 我 们 会 构建 一 套 完整 的 系统 ， 来 展 
现 如 何 为 每 个 阶段 编写 实际 的 着 色 器 。 








对 于 如 何 组 织 场景 动画 代码 ， 尤 其 是 线程 管理 ， 有 着 更 复杂 的 方 
法 。 有 的 语言 中 的 库 ， 如 JOGL 和 LWJGL (对 于 Java) 会 提供 一 些 支持 
动画 的 类 。 我 们 鼓励 对 于 设计 特定 应 用 泻 染 循环 或 者 “游戏 循环 ”) 感 
兴趣 的 读者 去 读 一 些 在 游戏 引擎 设计 上 更 加 专业 的 图 书 欠 Y1 均 ， 同 时 跟 


踪 在 gamedev.net [SP17 上 的 讨论 。 





我 们 在 glShaderSource0 命 令 上 注释 了 一 个 细节 。 它 的 第 四 个 参数 指 
定 了 一 个 “长 度数 组 ”， 其 中 包括 给 定 着 色 器 程序 中 每 行 代码 的 字符 串 的 
整数 长 度 。 如 果 这 个 参数 被 设 为 nmull， 像 我 们 之 前 那样 ，OpenGL 将 会 自 
动 从 以 null 结 尾 的 字符 串 中 构建 这 个 数组 。 因 此 我 们 特地 确保 所 有 我 们 
传 给 glShaderSource() 的 字符 串 都 是 以 null 结 尾 的 [通过 在 
createShaderProgram() 中 调用 c_strO0 函 数 ]。 实 际 中 通常 也 会 遇 到 手动 构 





建 这 些 数 组 而 非 传 入 null 的 应 用 程序 。 


在 本 书 中 ， 读 者 可 能 多 次 想 要 了 解 OpenGL 菏 些 方面 的 数值 限制 。 
例如 ， 程 序 员 可 能 需要 知道 几何 着 色 器 可 以 生成 的 最 大 输出 数 ， 或 者 可 
以 为 演 染 点 指定 的 最 大 尺寸 。 这 些 值 中 很 多 都 依赖 于 实现 ， 即 在 不 同 的 
机 器 上 是 不 同 的 。OpenGL 提 供 了 通过 使 用 glGet() 指 令 来 获取 这 些 值 的 
机 制 。 基 于 查询 的 参数 的 不 同类 型 ，g]lGet() 指 令 也 有 着 不 同 的 形式 。 例 
如 ， 查 询 点 的 尺寸 的 最 大 值 时 ， 如 下 调用 会 将 最 小 值 和 最 大 值 〈 基 于 运 
行 机 右上 的 OpenGL 实 现 ) 放 入 名 为 “size” 的 数组 中 的 前 两 个 元 素 。 


glGetFloatv(GL_ POINT_ SIZE RANGE, size) 


这 类 查询 有 很 多 。 更 多 示例 参见 OpenGL 参 考 文档 [OP161。 














在 本 章 中 ， 我 们 尝试 在 每 次 OpenGL 调 用 时 ， 描 述 其 各 个 参数 。 当 
我 们 癌 后 推进 时 ， 这 人 么 做 就 会 显得 元 余 ， 因 此 当 我 们 党 得 描述 参数 只 会 
妨碍 理解 时 ， 就 不 会 描述 该 参数 。 这 是 因为 很 多 OpenGL 函 数 有 大 量 与 
我 们 示例 无 关 的 参数 。 必 要 时 读者 应 当 使 用 OpenGL 文 档 来 获取 参数 详 


情 。 


习题 


2.1 修改 程序 2.2， 增 加 动画 ， 让 绘制 的 点 周而复始 地 放大 和 缩 
小 。 提 示 : 使 用 glPointSize() 方 法 ， 用 一 个 变量 作为 参数 。 


2.2 ”修改 程序 2.5， 使 之 绘制 等 腰 三 角形 《而 非 图 2.15 所 示 的 直角 


三 角形 ) 。 


2.3 CHH) 修改 程序 2.5， 使 之 包含 程序 2.3 中 所 示 的 错误 检查 模 
块 。 之 后 ， 尝 试 在 着 色 器 中 加 入 各 种 错误 ， 同 时 观察 泻 染 行为 以 及 生成 


的 错误 信息 。 
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[1] “上 下 文 "是 指 OpenGL 实 例 及 其 状态 信息 ， 其 中 包括 诸如 颜色 缓冲 
区 之 类 的 项 。 





[2] “ 双 缓 冲 "意味 着 有 两 个 颜色 缓冲 区 一 一 个 显示 ， 一 个 泻 染 。 演 
染 整 个 帧 后 ， 将 交换 缓冲 区 。 缓 冲 用 于 减少 不 良 的 视觉 伪 影 。 


TRNAS Kee T AFRE, TORE RE ARE RB E 
然 我 们 倾向 于 认为 3D 图 形 编程 是 最 现代 的 技术 领域 之 一 〈 它 在 很 多 方 
面 确 实 是 ) ， 但 它 用 到 的 很 多 技术 实际 上 可 以 退 溯 到 上 百年 前 。 其 中 一 
些 甚 至 是 文艺 复兴 时 期 的 伟大 哲学 家 们 就 已 经 理解 并 记录 的 。 





3D 图 形 学 中 几乎 每 个 方面 、 每 种 效果 一 一 移动 、 缩 放 、 透 视 、 纹 
理 、 光 照 、 阴 影 等 一 一 都 在 很 大 程度 上 以 数学 方式 实现 。 











这 里 ， 我 们 假设 读者 具备 基础 的 矩阵 运算 知识 。 对 于 基础 矩阵 代数 
的 完整 讲解 超出 了 本 书 的 范围 。 因 此 ， 如 果 读 者 在 任何 时 候 发 现 自己 不 
理解 特定 的 矩阵 操作 ， 则 应 当先 找 一 些 相关 材料 进行 阅读 ， 确 保 完 全 理 
解 矩 阵 操作 之 后 再 继续 学 习 。 


3.1 3D 坐 标 系 统 
3D 空 间 通 常用 3 个 坐标 轴 X、Y 和 2Z 来 表示 。 这 3 个 轴 可 以 以 两 种 方式 


来 布置 : 左手 或 右手 《它们 是 以 轴 的 参 癌 来 命名 的 ， 通 过 左手 或 右手 大 
拇指 与 食指 、 中 指 成 直角 来 进行 构造 ) 。 中 如 图 3.1 所 示 。 











左手 坐标 系 右手 坐标 系 
图 3.1 ”3D 坐标 系统 
知道 图 形 编程 环境 所 使 用 的 坐标 系 是 很 重要 的 。 例 如 ，OpenGL 中 


的 坐标 系 大 体 是 右手 坐标 系 ， 而 Direct3D 中 大 体 是 左手 坐标 系 。 在 本 书 
中 ， 除 非特 别 说 明 ， 否 则 我 们 都 是 用 右手 坐标 系 。 





32 A 


3D 空 间 中 的 点 可 以 通过 使 用 形 如 (2, 8, -3) 的 符号 ， 列 出 X、Y、 Z 
的 值 来 表示 。 不 过 ， 如 果 用 齐 次 坐标 一 种 在 19 世 纪 初 首次 描述 的 
表示 法 来 表示 点 会 更 有 用 。 在 每 个 点 的 齐 次 坐标 有 4 个 值 。 前 3 个 值 表 
示 X、Y 和 Z， 第 四 个 值 W 总 是 非 零 值 ， 通 常 为 7。 因 此 ， 我 们 会 将 之 前 的 
点 表示 为 〈2, 8,-3,1) 。 正 如 我 们 稍 后 将 要 看 到 的 ， 齐 次 坐标 将 会 使 我 
们 的 图 形 学 计算 更 高 效 。 











用 来 存储 齐 次 3D 华 标的 GLSL 数 据 类 型 是 vec4〈“vec” 代 表 问 量 ， 同 
时 也 可 以 用 来 表示 点 ) 。GLM 库 包含 适合 在 C++/OpenGL 应 用 中 创建 和 
存储 3 元 和 4 元 〈 齐 次 ) 点 的 类 ， 分 别 叫 作 vec3 和 vec4。 








3.3 ”和 矩阵 


NAM ee RET AY ELD EE TOIL EAD PB TA). GES Pin ee 
示 行 写 ， 第 二 个 下 标 表 示 列 号 ， 下 标 从 0 开始 。 我 们 在 3D 图 形 计 算 中 要 
用 到 的 矩阵 大 多 数 大 小 为 4x4， 如 图 3.2 所 示 。 





A10 A11 A12 A13 
A20 421 A22 A23 


Aoo Aoi Aoz a 
A30 431 Á32 433 





3.2 ”4x4 和 矩阵 





GLSL 语 言 中 的 mat4 数 据 类 型 用 来 存储 4x4 和 矩阵 。 同 样 ，GLM 中 有 
mat4 类 用 以 实例 化 并 存储 4x4 和 窍 阵 。 


单位 矩阵 中 一 条 对 角 线 的 值 为 |， 其 余 值 全 为 0: 


1 0 0 0 
0 1 0 0 
0 0 1 0 
0 0 0 1 


任何 值 乘 以 单位 矩阵 都 不 会 改变 。 在 GLM 中 ， 调 用 构造 函数 
glm::mat4 m(1.0f) 以 在 变量 m 中 生成 单位 矩阵 。 





矩阵 转 置 的 计算 是 通过 交换 矩 阵 的 行 和 列 完成 的 。 例 如 ; 


T 
App Aoi Ap .4o3 App Aino Ax Azo 
Aj An Ai Ag | _ | Aor An An Asi 
Ax Az An Az Ap Aig Ag Az 
A3 Agi Ago A33 Ag Ag Az A33 


GLM 库 和 GLSL 库 都 有 转 置 函 数 ， 分 别 是 glm::transpose(mat4) 和 


transpose(mat4). 


矩阵 加 法 简单 明了 : 
A+a B+b C+c D+d A BC D a bed 
E+e F+f G+g H+h| |E FGH e fgh 
I+i J+j K+k L+l | Pe of) OD i 7 k il 
M+m N+n O+o P+p M NOP mn o p 


在 GLSL 中 ，+ 运 算 符 在 mat4 上 进行 了 重 载 ， 以 支持 矩阵 加 法 。 


3D 图 形 学 中 有 很 多 有 用 的 算 阵 乘法 操作 。 和 窍 阵 乘法 一 般 可 以 从 左 
问 右 或 从 右 问 左 处 理 ( 注 意 ， 由 于 左 乘 和 右 乘 古 不 同 的 ， 所 以 矩阵 乘法 
不 满足 交换 律 )。 














在 3D 图 形 学 中 ， 扣 与 矩阵 相 乘 通常 从 右 问 左 ， 得 到 点 ， 如 : 


AX + BY +CZ+D A BCD X 
EX + FY + GZ +H o E P GH r Y 
IX+JY+KZ+L TOJ RKL Z 
MX + NY +OZ+H M NOP | 


注意 ， 我 们 用 齐 次 坐标 将 点 (X, Y, ZR AA BA LY FEBS 


GLSL 和 GLM 都 支持 点 (确切 地 说 是 vec4) 与 矩阵 使 用 * 操 作 符 相 
FE . 


4x4 和 矩阵 与 4x4 和 矩阵 相 乘 如 下 : 


A BC D abcd 
E F GH male f gh 
1 J KOL a S.. 
MNOP mnop 


Aa+Be+Ci+Dm <Ab+Bf+Cj+Dn Ac+Bq+Ck+Do Ad+ Bh+Cl+ Dp 
Ea+Fe+Gi+Hm Eb+Ff+Gj+Hn Ec+Fo+Gk+Ho Ed+Fh+Gl+Hp 
la+Je+Ki+Lm Ib+Jf+Kj+ĒLn Ic+Jg+Kk+Lo Id+Jh+KIi+Lp 
Ma+Ne+Oi+ Pm Mb+Nf+Oj+Pn Mc+Ng+Ok+Po Md+Nh+Ol+ Pp 
EREA HU EI, HERSES, ERD RI 
HERE ARI FF SEB RNS IE HE AR RY BE OR A E RERA 
合 律 。 


考虑 如 下 运算 序列 : 


New Point = Matrix; x (Matrix, x (Matrix; x Point)) 


我 们 将 一 个 点 与 Matrixs 相 乘 ， 之 后 将 结果 与 Matrixz 相 乘 ， 最 后 将 结 
果 与 Matrixl1 相 乘 。 其 结果 是 一 个 新 的 点 。 结 合 律 确 保 了 之 前 的 计算 与 如 
下 计算 相同 : 


New Po = (Nann Se Mana Se Matra Bot 
我 们 先 将 3 个 和 矩阵 相 乘 ， 建 立 Matrix1、Matrix，、Matrix3 的 连接 。 如 
果 我 们 称 其 为 Matrixc， 我 们 就 可 以 将 之 前 的 运算 写作 : 
New Point = Matrixc x Point 
我 们 稍 后 在 第 4 章 会 看 到 这 么 做 的 好 处 是 ， 我 们 需要 经 名 将 相同 的 


一 系列 矩阵 变换 应 用 到 场景 中 的 每 个 点 上 。 通 过 预先 一 次 计算 好 这 些 算 
阵 的 合并 ， 束 可 以 成 倍 减 少 总 的 窍 阵 运算 量 。 


GLSL 和 GLM 都 支持 使 用 重 载 后 的 * 运 算 符 进行 矩阵 乘法 。 


一 个 4x4 和 矩阵 的 道 矩 阵 是 另 一 个 4x4 和 矩阵 ， 用 M1 表示 ， 在 矩阵 乘法 
中 有 如 下 性 质 : 


M x M` = M` x M = 单位 矩阵 
EERI RER EE T o (A, AEA EA 
EPER IERE RSR EIK. SEIS ZERIT AIRE T i H a 
它 。 在 这 些 极 少 的 情况 下 ，GLSL 和 GLM 都 提供 了 mat4.inverse(O) 函 数 。 


3.4 变换 矩阵 


在 图 形 学 中 ， 和 矩阵 通常 用 来 进行 物体 的 变换 。 例 如 矩阵 可 以 用 来 将 
扩 从 一 处 移动 到 男 一 处 。 在 本 章 中 ， 我 们 将 会 学 习 5 个 有 用 的 变换 算 
阵 : 





。 平移 矩阵 ; 
o HIERE; 
。 旋转 矩阵 ; 
. 投影 矩阵 ; 
e。LookAt 和 矩阵 。 


变换 窍 阵 的 重要 特性 之 一 就 是 它们 都 是 4x4 和 矩阵 。 这 和 古 因为 我 们 决 
定 使 用 齐 次 坐标 系 。 否 则 ， 各 变换 窍 阵 可 能 会 有 不 同 的 维度 并 且 无 法 相 
乘 。 正 如 我 们 所 见 ， 确 保 变 换 矩 阵 大 小 相同 并 不 只 古 为 了 方便 ， 同 时 让 
TEMA ACERS A ETT PASE Th EAR RE A GET PERE © 





3.4.1 平移 矩阵 


平移 矩阵 用 于 将 物体 从 一 个 位 置 移 至 男 一 位 置 。 它 包含 一 个 单位 矩 
阵 ， 同 时 X、Y 和 2 的 移动 量 在 Ao3、Ai3、Ap3。 图 3.3 展 示 了 平移 矩阵 和 它 
与 齐 次 坐标 点 相 乘 的 效果 。 其 结果 是 一 个 以 平移 值 “移动 过 ”的 点 。 











X +Ty iot GA A 

ea 0 st eh: 
ZT 0 0 1 Biz 
1 000 1 1 





图 3.3 ”平移 矩阵 变换 


注意 ， 作 为 与 平移 窍 阵 相 乘 的 结果 ， 点 (Z Y, 2Z) 平 移 (或 移动 ) 到 了 位 
置 (X+T,, YHT, 2+T)。 同 样 需要 注意 的 是 这 个 乘法 是 从 右 同 左 相 乘 。 








例如 ， 当 我 们 想 要 将 一 组 点 同上 沿 7 轴 正方 同 移动 5 个 单位 ， 我 们 可 
以 通过 给 一 个 单位 滤 阵 的 TT 位 置 放 入 5 来 构建 平移 矩阵 。 之 后 我 们 只 需 
要 将 我 们 想 要 移动 的 反 与 矩阵 相 乘 就 可 以 了 。 

GLM 中 有 一 些 函 数 是 用 于 构建 与 点 相 乘 的 平移 矩阵 的 。 其 中 相关 
的 操作 有 : 


e glm::translate(x, y, Z) 构 建 平 移 (x, y, z) FEBS 


e mat4 x vec4。 


3.4.2 ”缩放 矩阵 


缩放 和 矩阵 用 于 改变 物体 的 大 小 或 者 将 点 回 原点 相反 方 同 移动 。 虽 然 
缩放 点 这 个 操作 乍 一 看 有 点 奇怪 ， 不 过 OpenGL 中 的 物体 都 是 用 一 组 或 
多 组 的 点 定义 的 。 因 此 ， 缩 放 物 体 涉及 缩放 它 的 点 的 集合 。 


缩放 和 矩阵 变换 由 单位 矩阵 和 位 于 Aoo, A1 A2> 的 X、 2Z 缩 放 因子 组 
成 。 图 3.4 中 展示 了 缩放 和 窍 阵 的 形式 和 当 它 与 齐 次 坐标 点 相 乘 的 效果 : 
所 得 的 结果 是 经 过 缩放 值 修改 后 的 新 点 。 





图 3.4 ”缩放 矩阵 变换 





GLM 中 有 一 些 函 数 是 用 于 构建 与 点 相 乘 的 缩放 矩阵 的 。 其 中 相关 
的 操作 有 : 


glm::scale(x, y, z) 构建 缩放 (x, y, z) 的 矩阵 ; 


mat4 x vec4. 


缩放 还 可 以 用 来 切换 坐标 系 。 例 如 ， 我 们 可 以 用 缩放 来 在 给 定 右 手 
坐标 系 的 情况 下 确定 左手 坐标 。 从 图 3.1 中 我 们 可 以 看 到 通过 反 转 Z 坐 标 
就 可 以 在 右手 坐标 系 和 左手 坐标 系 中 切换 ， 因 此 ， 用 来 切换 坐标 系 的 缩 
MOE BEAR PRE: 

10 0 0 
01 0 0 
00 -1 0 
00 0 1 


3.4.3 ”旋转 矩阵 


旋转 会 稍微 复杂 一 些 ， 因 为 在 3D 空 间 中 旋转 物体 需要 指定 旋转 轴 
和 旋转 的 角度 或 弧度 。 


在 16 世 纪 中 叶 ， 数 学 家 莱 昂 哈 德 : 欧 拉 表明 ， 围 经 任何 轴 的 旋转 都 
可 以 表示 为 绕 X、Y、Z 轴 旋转 的 组 合 下 UV 二 。 围 绕 这 3 个 轴 的 旋转 角度 被 
称 为 欧 拉 角 。 这 个 被 称 为 欧 拉 定 理 的 发 现 ， 对 我 们 很 有 用 ， 因 为 对 于 每 
NAR on EA Tie AY DAA EE ROR o 





旋转 变换 有 3 种 ， 分 别 是 绕 X、Y 和 Z 轴 旋转 ， 见 图 3.5。 同 时 GLM 中 
也 有 一 些 用 于 构建 旋转 矩阵 的 函数 。 


e glm::rotate(mat4, 0, x, y, Z) SESE X,  Z 轴 旋转 6 度 的 缩放 矩阵 。 


e mat4 x vec4. 


绕 X 轴 旋转 0 度 : 


绕 7 轴 旋转 O 度 : 


cosO 0 sing 
0 1 0 

~ |—sin@ 0 cos@ 
0 0 0 


cos —sin@ 
2 sin@ cos 
0 0 


0 0 








图 3.5 ”旋转 变换 矩阵 





实践 中 ， 妆 3D 空 间 中 旋转 轴 不 穿 过 原点 时 ， 物 体 使 用 欧 拉 角 进 行 
旋转 需要 几 个 额外 的 步 又。 一般 有 : 


(1) 平移 旋转 轴 以 使 它 经 过 原点 ; 
(2) 绕 X、Y 和 2Z 轴 旋转 适当 的 欧 拉 角 ; 
(3) 复原 步骤 (1) 中 的 平移 。 


图 3.5 中 所 示 的 3 个 旋转 变换 都 有 自己 有 趣 的 特性 ， 即 反 向 旋转 的 托 
阵 恰 等 于 其 转 置 窍 阵 。 通 过 观察 之 前 这 些 窍 阵 ， 同 时 有 cos(-0) = cos(0) 
和 sin(-6) = -sin(9)， 即 可 验证 。 后 面 将 会 用 到 这 个 特性 。 


欧 拉 角 在 某 些 3D 图 形 应 用 中 会 导致 一 些 瑕 六 。 因 此 ， 通 常 在 计算 
旋转 时 推荐 使 用 四 元 数 。 有 兴趣 探索 四 元 数 的 读者 可 以 寻求 很 多 已 有 的 
资源 〈 如 长 0881) 。 欧 拉 角 足以 满足 我 们 的 大 部 分 需求 。 











3.5 HÆ 





YAN A/D AAT IA). CMRA REME. KMP HFFA TE 
所 代表 的 含义 。 


记录 问 量 的 方法 各 式 各 样 ， 如 : 一 端 带 箭 头 的 线段 、 二 元 组 《〈 幅 
BE, FIA) 或 两 点 之 着 。 在 3D 图 形 学 中 ， 同 量 一般 用 空间 中 的 单个 点 
表示 ， 问 量 的 大 小 是 原点 到 该 点 的 距离 ， 方 问 则 是 原点 到 该 点 的 方 同 。 
在 图 3.6 中 ， 同 量 V 可 以 用 点 Pi1 和 P; 之 间 的 差 表 示 ， 也 可 以 等 价 地 用 原点 




















到 Ps 来 表示 。 在 我 们 的 所 有 应 用 中 ， 我 们 都 简单 地 将 V 表 示 为 (x, y, 2)， 
即 我 们 用 来 表示 Ps3 的 符号 。 








图 3.6 向量 V 的 两 种 表示 





用 与 表示 点 相同 的 方式 来 表示 向 量 很 方便 ， 因 为 我 们 对 点 和 向 量 用 
同样 的 矩阵 变换 。 不 过 这 也 会 使 人 困惑 。 因 此 ， 我 们 有 时 候 会 在 向 量 上 
加 一 个 小 箭头 〈 如 7) 。 许 多 图 形 系 统 并 不 区 分 点 和 向 量 ， 如 GLSL 和 
GLM， 它 们 所 提供 的 vec3/vec4 类 型 既 能 用 来 存储 点 ， 又 能 用 来 存储 向 
量 。 有 的 系统 (例如 本 书 Java 早 期 版 本 中 所 用 到 的 graphicslib3D 库 〉 对 
于 点 和 向 量 有 着 不 同 的 类 ， 强 制 使 用 适当 的 类 来 进行 所 需 的 操作 。 对 于 
点 和 向 量 使 用 同一 种 类 型 还 是 不 同 的 类 型 哪个 更 好 这 件 事 上 仍然 没有 定 


论 。 





在 GLM 和 GLSL 中 有 许多 3D 图 形 学 中 经 常用 到 的 同 量 操 作 。 如 假设 
有 辣 量 Alu, v, w) 和 B(x, y, Z): 


加 减法 : 


A+B=(ut+x,vty,w+z) 


glm: vec3 + vec3 

GLSL: vec3 + vec3 

归 一 化 〈 变 为 长 度 =1) : 

A= A/|A| = A/sqrt(u2+v2+w?), 其 中 |A| = 向 量 A 的 长 度 
glm: normalize(vec3) 或 normalize(vec4) 
GLSL: normalize(vec3) 或 normalize(vec4) 
点 积 : 

A:B=ux + vy + wz 

glm: dot(vec3,vec3) 或 dot(vec4,vec4) 
GLSL: dot(vec3,vec3) 或 dot(vec4,vec4) 
MAA: 

A x B = (vz-wy, wx-UZ, Uy-VX) 

glm: cross(vec3,vec3) 

GLSL: cross(vec3,vec3) 


其 他 有 用 的 问 量 函数 如 magnitude (在 GLSL 和 GLM 中 是 length()) 、 
reflection 和 refraction (在 GLSL 和 GLM 中 都 有 〉。 





我 们 现在 仔细 看 一 下 点 积 和 又 积 函 数 。 


3.5.1 点 积 的 应 用 





在 本 书 中 的 程序 大 量 使 用 了 点 积 。 点 积 最 重要 也 最 基本 的 应 用 是 求 
解 两 向 量 来 角 。 设 有 向 量 V 和 W， 计 算 其 夹 角 为 0。 


V 
DU W 


Ve oS ee 
cos(@) = 





iwi 
因此 ， 如 果 V 和 W 是 正规 化 向 量 (有 着 单位 长 度 的 向 量 一 一 这 里 
用 “标记 正规 化 ) ， 则 有 : 


cos(O) =V e W 
0 =arccos(V e W) 


有 趣 的 是 ， 我 们 后 面 会 看 到 通常 用 到 的 是 cos(9)， 而 非 9。 因 此 ， 这 
两 个 推导 出 的 公式 都 很 有 用 。 


点 积 同时 还 有 许多 其 他 用 途 。 





。 求解 向 量 的 大 小 : VV 。V。 

。 求解 两 回 量 是 否 正 交 ， 肴 正 交 ， 则 V e W=0. 

。 求 解 两 向 量 是 否 平行 ， 若 平行 ， 则 V 。 W =|V|w], 
。 求解 两 向 量 是 否 平行 但 指向 相反 方向 ， 若 满足 ， 则 
Vew=-—|V||W|, 











。 求解 两 向 量 夹 角 是 否 在 (-90°~+90°) : VeW>0. 
。 求解 点 P=(x, y, z) 到 平面 $=(a, b, c, 四 的 最 小 有 符号 距离 。 首 先 ， 求 
垂直 于 S 的 单位 法 同 量 : 

















_ a b C 
Va? + 62 +c?) Va? +B? +c?’ =) 以 及 从 原点 到 平 
d 
D= S S Avs Clo per 
面 的 最 短 距离 。 Va + te, ZR MPSS VA SEB 


(re PP)+D， 其 符号 由 P 在 S 的 哪 边 决定 。 
3.5.2 ”又 积 的 应 用 


两 向 量 义 积 的 一 个 重要 特性 是 ， 它 会 生成 一 个 新 的 向 量 ， 新 的 向量 
EX (ŒH) 于 之 前 两 个 同 量 所 定义 的 平面 。 我 们 会 在 本 书 中 大 量 使 用 
到 这 一 特性 。 


任意 两 个 不 共 线 疝 量 都 定义 了 一 个 平面 。 例 如 考虑 两 个 任意 疝 量 V 
和 W。 由 于 问 量 可 以 在 不 改变 含义 的 情况 下 进行 平移 ， 因 此 ， 可 以 将 它 
们 移动 到 起 点 相交 的 位 置 。 图 3.7 展 示 了 V 和 W 定 义 的 平面 ， 以 及 其 又 积 
所 得 法 向 量 。 其 所 得 法 同 量 的 方 同 遵循 右手 定 则 ， 即 将 右手 手指 从 V 
器 W 卷 曲 会 使 得 大 拇指 指向 法 癌 量 R。 











图 3.7 CPAP BIA fh] 








注意 ， 这 里 顺序 很 重要 。W xV 将 会 得 到 与 R 方 同 相 有 反 的 向 量 。 











通过 又 积 来 获得 法 向 量 的 能 力 对 我 们 后 面 要 学 习 的 光照 部 分 非常 重 
要 。 为 了 确定 光照 效果 ， 我 们 需要 知道 所 泻 染 模型 的 外 向 法 向 量 。 图 
3.8 中 展示 了 一 个 例子 ， 其 中 有 一 个 6 个 点 顶点) 构成 的 简单 模型 ， 使 
用 义 积 计算 来 获得 其 中 一 面 的 外 问 法 向 量 。 








P=V,-V, 
Q=V,-V, 


N=Px@Q 








图 3.8 ”计算 外 问 法 同 量 
3.6 局 部 和 世界 空间 


3D 图 形 学 “用 OpenGL 或 其 他 框架 〉 第 见 的 应 用 是 模拟 三 维 世 界 、 
在 其 中 放 入 物体 并 在 显示 器 上 观看 它 。 放 在 3D 世 界 的 物体 通常 用 三 角 
形 的 集合 来 进行 建 模 。 稍 后 我 们 会 在 第 6 章 中 详细 讲解 建 模 。 但 是 我 们 
可 以 先 了 解 一 下 大 致 的 处 理 过 程 。 





当 建 并 物体 的 3D 模 型 时 ， 我 们 通常 以 最 方便 的 定位 方式 描述 模 
型 。 如 果 模 型 是 个 球形 ， 那 么 我 们 很 可 能 将 球 心 定 位 于 原点 (0,0,0〉 并 
赋予 它 一 个 方便 的 半径 ， 比 如 1。 模 型 定义 的 空间 叫 作 局 部 空间 (local 
space) 或 模型 空间 (model space) 。OpenGEL 文 档 使 用 的 术语 是 物体 罕 
[1] Cobject space) 。 


之 后 这 个 球形 可 能 用 于 一 个 大 模型 的 部 分 ， 如 成 为 机 器 人 的 头 部 。 
这 个 机 器 人 人， 当然 ， 定 义 在 它 自己 的 局 部 /模型 空间 。 我 们 可 以 用 图 3.9 
所 示 的 矩阵 变换 通过 缩放 、 旋 转 和 平移 ， 将 球形 模型 放 在 机 器 人 模型 的 
空间 。 通 过 这 种 方式 ， 可 以 分 层次 地 构建 复杂 模型 (在 4.8 节 中 会 进 一 
步 通过 使 用 一 堆 矩 阵 讲 解 这 个 主题 ) 。 











图 3.9 球形 和 机 器 人 的 模型 空间 


使 用 同样 的 方式 ， 通 过 设 定 物体 在 模拟 世界 中 的 朝向 和 大 小 ， 将 物 
体 放 在 模拟 这 个 世界 的 空间 中 ， 这 个 空间 叫 作 世 界 空间 。 将 对 象 定位 及 
定 癌 在 世界 空间 的 矩阵 称 为 模型 算 阵 或 M。 





3.7” 视 党 空 间 和 合成 相机 








到 此 为 止 ， 我们 所 接触 的 变换 矩阵 全 都 在 3D 空 间 中 操作 。 但 是 ， 
我 们 最 终 需 要 将 3D 空 | 或 它 的 一 部 分 一 一 展示 在 2D 显 示 堪 上 。 为 
了 达成 这 个 目标 ， 我 们 需要 找到 一 个 有 利 点 。 正 如 我 们 在 现实 世界 通过 
眼睛 从 一 点 观察 一 样 ， 我 们 也 必须 找到 一 点 并 确立 观察 方向 作为 我 们 观 

察 虚 拟 世 界 的 窗口 。 这 个 点 叫 作 “ 视 图 ”或 “视觉 ”空间 ， 或 “合成 相机 ”。 











如 图 3.10 和 图 3.12 所 示 ， 观 察 3D 世 界 需 要 : a) 将 相机 放 入 世界 的 


某 个 位 置 ; b) 调整 相机 的 角度 ， 通 常 需要 一 套 它 自己 的 直角 坐标 
轴 U/V/N; (c) 定义 一 个 视 体 (view volume) ; (d) 将 视 体内 的 对 象 
投影 到 投影 平面 (projection plane) 上 。 


。 7 了 “眼睛 ”( 相 机 





BD s srm 
> 
投影 平面 





世界 空间 中 的 物体 


图 3.10 ”将 相机 放 入 3D 世 界 中 


OpenGL 有 一 个 固定 在 原点 (0,0,0) 并 癌 下 看 癌 Z 轴 负 方 向 的 相机 ， 如 
图 3.11 所 示 。 








图 3.11 _ OpenGL 固定 相机 


为 了 应 用 OpenGL 相 机 ， 我 们 需要 做 的 是 将 它 模 拟 移动 到 适合 的 位 
置 和 方向 。 我 们 需要 先 找 出 在 世界 中 的 物体 与 我 们 期 望 的 相机 位 置 的 相 
对 位 置 ( 如 物体 应 该 在 由 图 3.12 所 示 相 机 U、V、N 轴 定义 的 “相机 空 
闻 ? 中 的 何 处 ) 。 给 定 世 界 空间 中 的 点 Pw， 我 们 需要 通过 变换 将 它 转换 


成 相应 相机 空间 中 的 点 ， 从 而 让 它 看 起 来 好 像 是 我 们 从 期 望 的 相机 位 
置 Cw 进行 观看 的 。 我 们 通过 计算 它 在 相机 空间 中 的 位 置 P. 实 现 。 已 知 
OpenGL 相 机 位 置 永远 固定 在 点 (0,0,0)， 问 : 我 们 如 何 变换 来 实现 上 述 功 


au 
BE? 








图 3.12 ”相机 方向 

要 做 的 变换 如 下 ; 

(1) 将 Pu 平移 ， 其 向 量 为 负 的 期 望 相 机 位 置 。 

(2) 将 Pw 旋转 ， 其 角度 为 负 的 期 望 相机 旋转 的 欧 拉 角 。 


我 们 可 以 构建 一 个 蛙 一 变换 矩阵 以 完成 旋转 和 平移 ， 这 个 算 阵 叫 作 
视图 变换 (viewing transform) 和 矩阵 V。 和 矩阵 V 通 过 合并 矩阵 T (包含 负 
相机 期 望 位 置 的 平移 矩阵 ) MR “包含 负 相 机 期 望 旋转 的 旋转 矩阵 )。 
在 本 例 中 ， 从 右 同 左 ， 我 们 先 平 移 世 界 空间 中 的 点 Pw， 之 后 旋转 : 


Pe=R(T*Py) 


如 前 所 见 ， 通 过 结合 律 我 们 得 到 如 下 运算 : 


Po=(R*T) Py 
如 果 我 们 将 合并 后 的 R* T 存 入 矩阵 V， 运 算 成 为 
Pe= V* Py 


完整 的 计算 以 及 T 和 R 的 准确 内 容 在 图 3.13 中 我 们 忽略 了 对 和 矩 阵 R 
的 推导 一 一 推导 过 程 见 参考 资料 FV351) 。 








负 相机 旋转 角 负 相 机 位 置 

Xe\ [Ux Uy Vz 0] [1 0 0 -Cx] /Px 

Yo\_|V WW vz oj |0 1 0 -Cy Py 

Ze Ny Ñ, Ñ, ol |0 0 1 -c| \Pz 

1 0 0 0 1 0 0 0 1 1 
视觉 空间 ROGER) TPB) 世界 空间 
中 的 点 Pe 中 的 点 Pr 

克 视 图 变换 ) 


图 3.13 ”推导 视图 和 矩阵 


通常 ，V 算 阵 与 模型 第 阵 M 合 并 成 为 一 个 模型 -视图 (model-view， 
MV) 矩阵: 





MV=V*M 


之 后 ， 点 Pw 在 从 目 己 的 模型 空间 通过 如 下 一 个 步骤 就 可 以 直接 转 
换 至 相机 空间 : 


Po=MV * Py 


在 复杂 场景 中 ， 当 我 们 需要 对 每 个 项 点， 而 非 只 是 一 个 点 做 这 个 变 
换 的 时 候 ， 这 种 方法 的 好 处 就 很 明显 了 。 通 过 预先 计算 MV， 对 于 空间 








我 们 进行 一 次 矩阵 乘法 计算 。 之 后 ， 我 们 将 会 看 


中 每 个 点 的 变换 只 需要 
个 过 程 延伸 到 与 计算 更 多 的 合并 和 矩阵， 以 大 量 减 少 每 


到 ， 我 们 可 以 将 这 1 
个 顶点 的 计算 量 。 





3.8 ”投影 矩阵 





当 我 们 设置 好 相机 之 后 ， 就 可 以 学 习 投 影 窍 阵 了 。 我 们 需要 学 习 的 
两 个 重要 的 投影 矩阵 是 : 透视 投影 和 正 射 投影 。 


3.8.1 透视 投影 窍 阵 
透视 投影 通过 使 用 透视 概念 模仿 我 们 看 真实 世界 的 方式 ， 尝 试 让 


2D 图 像 看 起 来 像 是 3D 的 。 物 体 近 大 远 小 ，3D 空 间 中 有 的 平行 线 用 透视 
法 男 出 来 就 不 再 平行 。 





透视 法 是 15 世 纪 初 一 16 世 纪 初 文艺 复兴 时 期 的 伟大 发 现 之 一 ， 当 时 
的 画家 开始 绘制 比 前 人 更 加 真实 的 了 画作。 





图 3.14 中 是 一 个 绝 好 的 例子 。 卡 洛克 里 韦 利 在 1486 年 绘制 的 《对 和 母 
领 报 》《 又 名 《给 芭 . 埃 米 迪 乌 斯 报 辟 》 目 前 收藏 于 伦敦 国家 美术 锯 
[CR86]) 。 这 幅 画 明显 强烈 地 使 用 了 透视 一 一 右 侧 建筑 的 左 墙 向 后 的 线 
条 戏剧 性 地 一 起 倾斜 。 这 种 画 法 让 人 产生 了 深度 感知 和 画 中 有 3D 空 间 
的 错觉 。 这 个 过 程 中 ， 在 现实 中 平行 的 线 在 画 中 并 不 平行 。 同 样 ， 在 前 
景 中 的 人 物 比 在 背景 中 的 人 物 要 大 。 虽 然 今天 我 们 将 这 些 视 为 理所当然 
的 ， 不 过 算出 实现 它 的 变换 矩阵 还 是 需要 一 些 数 学 分 析 的 。 











图 3.14 《圣母 领 报 》 〈 卡 洛克 里 韦 利 ，1486 年 ) 


我 们 通过 使 用 变换 矩阵 将 平行 线 变 为 恰当 的 不 平行 线 来 实现 这 个 效 
果 。 这 个 矩阵 叫 作 透视 矩阵 或 者 透视 变换 ， 通 过 定义 4 个 参数 来 进行 视 
Vs (view volume) 的 构建 。 其 中 4 个 参数 是 纵横 比 、 视 场 、 投 影 平面 或 
近 剪 裁 平 面 、 远 剪裁 平面 。 





只 有 在 远近 副 裁 平面 间 的 物体 才 会 被 泻 染 。 近 攀 裁 平面 同时 也 古物 
体 所 投影 到 的 平面 ， 通 常 放 在 离 眼睛 或 相机 较 近 的 位 置 ( 如 图 3.15 左 侧 
所 示 〉。 我 们 会 在 第 4 章 中 讨论 如 何 为 远 覃 裁 平 面 选 择 合适 的 值 。 帘 场 
是 可 视 空 间 的 纵向 角度 。 纵 横 比 是 远近 剪裁 平 面 的 宽度 比 高 度 。 通 过 这 





些 元 素 所 形成 的 形状 叫 作 视 锥 〈frustum) ， 如 图 3.15 所 示 。 


视 场 中 的 物体 
7 方向 视 场 (Field of View，FOV) 角 









远 剪 裁 平面 
图 3.15 ”透视 视 体 或 视 锥 
透视 矩阵 用 于 将 3D 空 间 中 的 点 变换 至 近 剪 裁 平 面 上 合适 的 位 置 ， 


它 的 构建 需要 先 计算 q、A、B、C 的 值 ， 之 后 用 这 些 值 来 构建 透视 和 矩 
阵 ， 如 图 3.16 所 示 〈 推 导 过 程 见 参考 资料 FV351) 。 


1 


tan cae iew ) 


n q 


= aspectRatio 


R= Znear 十 Zfar 
Znear Zfar 
_ 2 * (Znear * Z far ) 


Znear 一 Zfar 








图 3.16 ”构建 透视 矩阵 





FE SCI 4 AB FR BE RAE D, R ie SE UT FIA YY ZS AA 4 x 4 
阵 。GLM 库 也 包含 了 一 个 用 于 构建 透视 窍 阵 的 函数 glm::perspective()。 


3.8.2 TESS SCR. FE RE 


在 正 出 投影 中 ， 平 行 线 仍 然 是 平行 的 ， 即 不 使 用 透视 ， 如 图 3.17 所 
示 。 正 射 与 透视 相反 ， 在 视 体 中 的 物体 不 因 其 距 相机 距离 做 任何 调整 ， 
而 直接 进行 投影 。 





Lear 


全 站 


投影 平面 





远 剪 裁 平 面 


图 3.17” 正 射 投 影 








正 射 投影 是 一 种 平行 投影 ， 其 中 所 有 的 投影 都 与 投影 平面 垂直 。 正 
PPR Ca) 从 相机 到 投影 平面 的 距离 Zu Cb) 
从 相机 到 远 剪 裁 平面 的 距离 Zw.;，(c) LIL、R、T、 和 B 的 值 ， 其 中 L 和 R 
分 别 是 投影 平面 左右 边界 的 Xx 坐标 ，T 和 B 分 别 是 投影 平面 上 下 边界 的 Y 
坐标 ， 如 图 3.18 所 示 。 














R=L R-L 
0 2 0 T+B 
T-B 了 一 了 

0 0 1 Z near 
Zs =Z sar Z tar 一 和 


图 3.18 ” 正 射 投影 矩阵 











并 非 所 有 平行 投影 都 是 正 射 投影 ， 但 是 其 他 平行 投影 不 在 本 书 范 围 





平行 投影 与 我 们 眼睛 所 见 到 的 真实 世界 不 同 。 但 是 它们 在 很 多 情况 
下 都 有 其 用 处 ， 比 如 投身 阴影、 进行 3D 表 裁 以 及 CAD (计算 机 辅助 设 
th) 中 一 一 用 在 CAD 中 是 因为 无 论 物体 如 何 摆 放 ， 其 尺寸 都 不 变 。 无 论 
如 何 ， 本 书 中 绝 大 多 数 例子 使 用 透视 投影 。 


3.9 LookAt 和 矩阵 





我 们 最 后 要 学 习 的 变换 是 LookAt 和 矩 阵 。 当 你 想 要 把 相机 放 在 茶 处 并 
看 问 一 个 特定 的 位 置 时 ， 束 需要 用 到 它 了 ， 如 图 3.19 所 示 。 当 然 ， 用 我 
们 已 经 学 到 的 方法 也 可 以 做 到 ， 但 是 这 个 操作 非常 频繁 ， 因 此 为 它 专门 
构建 一 个 矩阵 通 第 比较 有 用 。 


eo Q aw “了 眼睛” ) 





rem 
图 3.19 ”LookAt 的 元 素 
LookAt 变 换 依然 由 相机 旋转 决定 。 我 们 通过 指定 大 致 旋转 朝 同 的 向 
量 〈 如 世界 Y 轴 ) 。 通 常 ， 可 以 通过 一 系列 又 积 获得 相机 旋转 的 正面 、 
侧面 以 及 上 面 。 图 3.20 展 示 了 计算 过 程 ， 从 相机 位 置 〈 眼 睛 〉、 目 标 位 
置 以 及 初始 向 上 向 量 Y 来 构建 LookAt 矩 阵 ， 其 推导 过 程 在 参考 资料 EV95] 
HH 





fwd = normalize(eye — target ) 
side = normalize(—fwd x Y) 
up = normalize(side x (— fwd)) 
LookAt 和 矩阵 等 于 : 
side, side, side, —(side e% eye) 


upy upy upz —(up % eye) 
—fwd, -fwdy -fwdz —(—fwd e eye) 
0 0 0 i 





图 3.20 LookAt 和 矩阵 





我 们 可 以 将 这 个 过 程 构建 为 一 个 C++/OpenGL 实 用 函数 ， 通 过 指定 
相机 位 置 、 ae 构建 一 个 LookAt 和 矩阵 。 由 
于 GLM 中 已 经 有 一 个 用 来 构建 LookAt 和 矩阵 的 函数 glm: ni 我 们 用 
它 就 可 以 了 。 稍 后 本 书 第 8 半生 成 阴影 的 时 候 会 用 到 这 个 函数 。 





3.10 FAK Hs E FE BE Ae eH) GLSL 函数 


虽然 GLM 包 含 了 许多 预定 义 的 3D 变 换 函 数 ， 本 章 也 已 经 涵盖 了 其 
中 如 平移 、 旋 转 和 缩放 ， 但 GLSL 只 包含 了 基础 的 矩阵 运算 ， 如 加 法 、 
合并 等 。 因 此 ， 有 时 我 们 需要 自己 为 GLSL 写 一 些 实 用 函数 来 构建 3D 变 
换 矩 阵 ， 以 在 着 色 器 中 进行 特定 3D 运 算 。 用 于 存储 这 些 矩 阵 的 GLSL 数 
据 类 型 是 mat4。 


GLSL 中 用 于 初始 化 mat4 和 矩阵 的 语法 以 列 为 单位 读 入 值 。 前 4 个 参数 
会 放 入 第 一 列 ， 接 下 来 4 个 参数 放 入 下 一 列 ， 直 到 第 四 列 ， 如 下 所 示 : 


mat4 translationMat 
mat4(1.0, 0.0, ©. 

0 

1 








0.0, 1.0, 
0.0, 0.0, 
tx, ty, tz, 





构建 如 图 3.3 所 示 的 平移 矩阵 。 


we 旋转 和 缩放 算 阵 的 GLSL ek 
数 ， 函数 对 应 于 本 章 之 前 给 出 的 一 个 公式 。 我 们 稍 后 在 书 中 将 会 用 











ls 


程序 3.1 在 GLSL 中 构建 变换 矩阵 














// 构建 并 返回 平移 矩阵 

mat4 buildTranslate(float x, float y 

{ mat4 trans = mat4(1.0, 0.0, 0.0, @. 
0 
0 








， float z) 


3 


` 


6 
@.0, 1.0, 0.0, 0.0 
0.0, 0.0, 1.0, 0.0 


X, Ys Z, 1.0 ); 


v 


return trans; 


} 


























// 构建 并 返回 绕 X 轴 的 旋转 矩阵 
mat4 buildRotateX(float rad) 
{ mat4 xrot = mat4(1.0, 0.0, 0.0, 0.0, 

0.0, cos(rad), -sin(rad), 0.0, 
， Sin(rad), cos(rad), 0.0, 
, 0.0, 0.0, 1.0 ); 


© © 


ð. 
ð. 
return xrot; 


} 


// 构建 并 返回 绕 Y 轴 的 旋转 矩阵 

mat4 buildRotateY(float rad) 

{ mat4 yrot = mat4(cos(rad), 8.06, sin(rad), 90.0, 
0.0, 1.0, 0.0, 0.0, 
-sin(rad), 0.0, cos(rad), 0.0, 
0.0, 0.0, 0.0, 1.0 ); 


























return yrot; 


} 


// 构建 并 返回 绕 Z 轴 的 旋转 矩阵 

mat4 buildRotateZ(float rad) 

{ mat4 zrot = mat4(cos(rad), -sin(rad), 0.0, 0.0, 
Sin(rad), cos(rad), 0.0, 0.0, 
0.0, 0.0, 1.0, 0.0, 
0.0, 0.0, 0.0, 1.0 ); 


























return zrot; 


} 


// 构建 并 返回 缩放 矩阵 
mat4 buildScale(float x, float y, float z) 
{ mat4 scale = mat4(x, 0.0, 0.0, 0.0, 














Q.0, y, 0.0, 0.0, 
Q.0, 0.0, Z, 0.0, 
0.0, 0.0, 0.0, 1.0 ); 


return scale; 


} 





补充 说 明 





在 本 章 中 我 们 看 到 了 使 用 和 窍 阵 对 点 进行 变换 的 例子 。 稍 后 ， 我 们 会 
将 同样 的 变换 应 用 于 向 量 。 要 对 疝 量 V 使 用 变换 矩阵 M 进 行 与 点 相同 的 


ARH, — Ai EET SEM ERE, WAM DT, IEA re Re aH DL 
V。 在 某 些 情况 下 ，M=(M“')'， 在 这 些 情况 下 只 要 用 M 就 可 以 了 。 例 
如 ， 本 章 中 我 们 所 见 到 的 基础 旋转 矩阵 与 它们 的 逆转 置 矩 阵 相等 ， 我 们 
可 以 直接 将 他 们 应 用 于 疝 量 (同样 也 可 以 应 用 于 点 ) 。 因 此 本 书 中 有 时 
候 使 用 (M 1 对 向 量 进行 变换 ， 有 时 候 仪 使 用 M。 





本 章 中 仍 未 讨论 的 一 个 技术 是 在 空间 中 平滑 地 移动 相机 。 这 是 一 种 
很 有 用 的 技术 ， 在 制作 游戏 和 CGI 电影 时 更 加 明显 ， 同 时 也 适用 于 可 视 
化 、 虚 拟 现实 和 3D 建 模 。 





我 们 也 没有 讲解 所 有 给 出 的 矩阵 变换 的 推导 过 程 〈 见 其 他 资源 ， 如 
参考 资料 FY) 。 相 反 ， 我 们 努力 做 到 简明 地 总 结 了 基础 3D 图 形 学 变 
种 中 必 备 的 点 、 回 量 和 矩阵 运算 。 随 独 本 书 的 推进 ， 我 们 将 会 看 到 本 章 
中 方法 的 许多 实际 应 用 。 





习题 


3.1 修改 程序 2.5， 为 顶点 着 色 器 添加 程序 3.1 中 的 一 个 buildRotate0) 
函数 ， 并 将 其 应 用 到 组 成 三 角形 的 点 上 。 其 结果 应 该 导致 三 角形 从 原来 
的 方 回 进行 旋转 。 这 个 旋转 过 程 无 须 动画 化 。 





3.2 CHR) 在 3.4 节 末尾 ， 我 们 讲 到 欧 拉 角 在 东 些 情况 下 会 导致 
瑕 辛 。 其 中 最 常见 的 叫 作 “万 向 市 死 锁 ”"。 摘 述 万 癌 市 死 锁 ， 给 出 一 个 例 
子 ， 并 解释 为 什么 万 向 市 死 锁 会 是 个 问题 。 





3.3 FF) 避免 这 些 瑕 兹 的 一 种 方法 是 使 用 四 元 数 而 非 欧 拉 


角 。 我 们 在 本 书 中 并 没有 学 习 四 元 数 ， 但 是 GLM 有 一 些 四 元 数 相 关 的 
类 和 函数 。 请 独立 学 习 四 元 数 ， 并 熟悉 GLM 中 的 四 元 数 功 能 。 
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指 回 外 ， 手 心 向 上 ; 右手 大 拇指 辣 内 ， 手 心 辐 上 。 一 一 译 者 注 


第 4 章 ”管理 3D 图 形 数 据 





使 用 OpenGL 泻 染 3D 图 形 通 常 需要 将 耕 干 数据 集 友 送 给 OpenGL 着 
色 右 管线 。 eee 想 要 2 ae 个 简单 的 3D 对 象 ， 比 如 一 个 立方 
体 ， 你 至 要 发 送 以 下 项 目 。 


。 立方 体 模型 的 顶点 。 
。 控制 立方 体 在 3D 空 间 中 昌 癌 表现 的 变换 矩阵 。 








把 数据 发 送 给 OpenGL 管 线 还 要 更 加 复杂 一 点 ， 有 两 种 方式 。 





。 通过 顶 扣 属性 的 缓冲 区 。 
。 直接 及 送 给 统一 变量 。 


理解 这 两 种 机 制 具体 如 何 工作 非常 重要 ， 这 样 我 们 才能 为 每 个 要 友 
送 的 项 目 选取 合适 的 方法 。 


让 我 们 从 泻 染 一 个 简单 的 立方 体 开始 。 
4.1 绥 冲 区 和 顶点 属性 


想 要 绘制 一 个 对 象 ， 它 的 顶 皮 数据 需要 被 发 送 给 顶点 着 色 绥 。 通 生 
会 把 顶点 数据 在 C++ 端 放 入 一 个 缓冲 区 ， 并 把 这 个 缓冲 区 和 着色 器 中 声 
明 的 顶点 属性 相关 联 。 要 完成 这 件 事 ， 有 好 几 个 步骤 ， 有 些 步 又 只 需要 
做 一 次 ， 而 如 果 是 动画 场景 的 话 ， 有 些 步骤 需要 每 帧 都 做 一 次 : 





只 做 一 次 的 步骤 一 一 一般 是 在 initO 中 。 

(1) 创建 一 个 缓冲 区 。 

(2) 将 顶点 数据 复制 到 缓冲 区 。 

每 帧 都 要 做 的 步骤 一 一 一 般 是 在 display0 中 。 
(1) 启用 包含 了 顶点 数据 的 缓冲 区 。 

(2) 将 这 个 缓冲 区 和 一 个 顶点 属性 相关 联 。 
(3) 启用 这 个 顶点 属性 。 

(4) 使 用 glDrawArrays(...) 绘 制 对 象 。 


所 有 绥 冲 区 通常 在 程序 开始 的 时 候 统 一 创建 ， 可 以 在 init() 中 ， 或 者 
在 被 initO 调 用 的 函数 中 。 在 OpenGL 中 ， 缓 冲 区 被 包含 在 顶点 缓冲 对 象 
(Vertex Buffer Object, VBO) 中 ，VBO 在 C++/OpenGL 应 用 程序 中 被 
声明 和 实例 化 。 一 个 场景 可 能 需要 很 多 VBO， 上 所 以 常常 会 在 init0 中 生成 
并 填充 若干 个 VBO， 这 样 在 你 的 程序 需要 绘制 一 个 或 多 个 VBO 的 时 候 
就 可 以 直接 使 用 。 








缓冲 区 使 用 特定 的 方式 和 顶点 属 性 交互 。 当 glDrawArrays() 补 执行 
时 ， 绥 冲 区 中 的 数据 开始 流动 ， 从 缓冲 区 的 开头 开始 ， 按 顺序 流 过 顶点 
着 色 器 。 像 第 2 章 中 介绍 的 一 样 ， 顶 点 着 色 嚣 对 每 个 顶点 执行 一 次 。3D 
空间 中 的 顶点 需要 3 个 数值 ， 所 以 着 色 器 中 的 顶点 属性 党 常会 以 vec3 类 
型 接收 到 这 3 个 数值 。 然 后 ， 对 缓冲 区 中 的 每 组 这 3 个 数值 ， 厦 色 咒 会 被 





调用 ， 如 图 4.1 所 示 。 


VBO 中 的 顶点 着 色 器 调用 #1 
浮 点 缓冲 区 


in vec3 position 


position =(2.0, 3.8, -1.0) 





顶点 着 色 器 调用 #2 


in vec3 position 
position = (7.6, -2.5, -1.7) 





顶点 着 色 器 调用 #3 


in vec3 position 





position 三 (4.0, 0.0, 1.2) 


图 4.1 在 VBO 和 顶点 属性 之 间 的 数据 传递 


OpenGL 中 还 有 一 种 相关 的 结构 ， 叫 作 顶 点 数组 对 象 Vertex Array 
Object, VAO) 。OpenGL 的 3.0 版 本 引入 了 VAO， 作 为 一 种 组 织 绥 冲 区 
的 方法 ， 让 绥 冲 区 在 复杂 场景 中 更 容易 操控 。OpenGL 要 求全 少 创建 一 
个 VAO， 对 我 们 现在 来 说 一 个 就 够 了 。 





举 个 例子 ， 假 设 我 们 想 要 显示 两 个 对 象 。 在 C++ 端 ， 我 们 可 以 声明 
一 个 VAO 和 两 个 相关 的 VBO 每 个 对 象 一 个 ) ， 就 像 这 样 : 





GLuint vao[1]; // OpenGL 要 求 这 些 数 值 以 数组 的 形式 指定 
GLuint vbo[2]; 


glGenVertexArrays(1, vao); 
glBindVertexArray(vao[@]); 
glGenBuffers(2, vbo); 





glGenVertexArrays() 和 g]GenBuffers() 这 两 个 OpenGL 命 令 分 别 创建 


VAO 和 VBO， 并 返回 它们 的 整数 型 ID 。 我 们 把 这 些 ID 存 进 整 数 型 数组 
vao 和 vbo 中 。 这 两 个 命令 各 自 有 两 个 参数 ， 第 一 个 是 要 创建 多 少 个 ID， 
第 三 个 是 用 来 保存 返回 的 ID 的 数组 。glBindVertexArrays0 命 令 的 日 的 是 
将 指定 的 VAO 标 记 为 “活跃 "， 这 样 生成 的 缓冲 区 叫 就 会 和 这 个 VAO 相 关 
联 。 











每 个 缓冲 区 需要 有 在 顶点 着 色 器 中 声明 的 相应 的 项 点 属性 变量 。 顶 
点 属性 通常 是 厦 色 需 中 首先 被 声明 的 变量 。 在 我 们 的 立方 体例 子 中 ， 用 
来 接收 立方 体 顶 点 的 顶点 属性 可 以 在 顶点 着 色 器 中 这 样 声明 : 


layout (location = 6) in vec3 position; 


关键 字 in 意 思 是 “输入 ”(input) ， 表 示 这 个 顶点 属性 将 会 从 缓冲 区 
中 接收 数值 (我 们 以 后 会 看 到 ， 顶 点 属性 也 可 以 用 来 “输出 ”) 。 像 我 们 
之 前 看 到 的 一 样 ，“vec3” 的 意思 是 着 色 器 的 每 次 调用 会 抓 到 3 个 浮 点 类 
型 数值 (分 别 表示 x、y、z， 它 们 组 成 一 个 顶点 数据 〉。 变 量 的 名 字 
是 “position”。 命 令 中 “layout (location=0)” 这 部 分 叫 作 “layout 修 饰 符 ”， 也 
就 是 我 们 把 顶点 属性 和 特定 缓冲 区 关联 起 来 的 方法 。 这 意味 着 ， 这 个 顶 
点 属性 的 识别 号 是 0， 我 们 后 面 会 用 到 。 











我 们 把 一 个 模型 的 顶点 加 载 到 缓冲 区 (VBO) 的 方式 取决 于 模型 的 
顶点 数值 存储 在 哪里 。 在 第 6 章 中 ， 我 们 将 会 看 到 通常 如 何 使 用 建 模 工 
具 〈 比 如 Blender [BL16] 或 者 Maya [MA161) 创建 模型 、 导 出 成 标准 文件 格 
式 《〈《 比 如 .obj， 在 第 6 章 会 介绍 ) 并 导入 到 C++/OpenGL 应 用 程序 。 我 们 
还 会 看 到 模型 的 顶点 如 何 被 临时 计算 出 来 ， 或 者 在 管线 中 使 用 细 分 着 色 








现在 ， 假 设 我 们 想 要 绘制 一 个 立方 体 ， 并 且 假 定 我 们 的 立方 体 的 顶 
点 数据 在 C++/OpenGL 应 用 程序 中 的 数组 中 直接 指定 。 在 这 种 情况 下 ， 
我 们 需要 Cad 将 这 些 值 复制 到 我 们 之 前 生成 的 两 个 缓冲 区 中 的 一 个 之 
中 。 为 此 ， 我 们 需要 使 用 OpenGL 的 glBindBuffer() 命 令 将 缓冲 区 〔 例 
如 ， 第 0 个 缓冲 区 ) 标记 为 “活跃 ”并 且 Cb) 使 用 glBufferData() 命 令 将 
包含 顶点 数据 的 数组 复制 进 活跃 缓冲 区 (这 里 应 该 是 第 0 个 VBO)〉。 假 
设 顶 点 存储 在 名 为 vPositions 的 浮 点 类 型 数组 中 ， 以 下 C++ 代码 四 会 将 这 
些 值 复制 到 第 0 个 VBO 中 : 





glBindBuffer(GL ARRAY BUFFER, vbo[@]); 


glBufferData(GL ARRAY BUFFER, sizeof(vPositions), vPositions, GL_STATIC_DR 
AW); 





接 下 来 ， 我 们 向 display0 中 添加 代码 ， 将 缓冲 区 中 的 值 发 送 到 着 色 
器 中 的 顶点 属性 。 我 们 通过 以 下 3 个 步骤 来 实现 : (a) 使 用 
glBindBuffer() 命 令 标 记 这 个 缓冲 区 为 “活跃 ”"， 正 如 上 所 述 ; (b) 将 活 
跃 缓冲 区 与 着 色 器 中 的 顶点 属性 相关 联 : 《〈c) 启用 顶点 属性 。 以 下 代 
码 行 实现 了 这 些 步 又 : 





glLBindBuffer(GL_ARRAY_BUFFER，vbo[6]); // 标记 第 6 个 缓冲 
区 为 "活跃 " 

glVertexAttribPointer(@, 3, GL_FLOAT, GL_FALSE, ©, @); // 将 第 6 个 属性 关 
联 到 缓冲 区 














glEnableVertexAttribArray(Q) ; // 启用 第 6 个 顶点 
属性 

















现在 ， 当 我 们 执行 glDrawArraysO0 时 ， 第 0 个 VBO 中 的 数据 将 被 传输 
给 拥有 位 置 0 的 layout 修 饰 符 的 顶点 属性 中 。 这 会 将 立方 体 的 顶点 数据 发 





送 到 着 色 器 。 
4.2 统一 变量 


要 想 演 染 一 个 场景 以 使 它 看 起 来 是 3D 的 ， 需 要 构建 适当 的 变换 矩 
阵 ， 例 如 第 3 章 中 描述 的 那些 ， 并 将 它们 应 用 于 模型 的 每 个 项 点 。 在 项 
点 着 色 器 中 应 用 所 需 的 矩阵 运算 是 最 有 效 的 ， 并 且 习 惯 上 会 将 这 些 和 矩阵 
从 C++/OpenGL 应 用 程序 发 送 给 着 色 器 中 的 统一 变量 。 


使 用 “uniform” 关 键 字 在 着 色 器 中 声明 统一 变量 。 以 下 示例 声明 了 用 
于 存储 模型 -视图 和 投影 矩阵 的 变量 ， 足 够 我 们 的 立方 体 程序 使 用 : 


uniform mat4 proj_matrix; 

关键 字 “mat4” 表 示 这 些 是 4x4 和 矩阵 。 这 里 我 们 将 用 来 保存 模型 -视图 
和 矩阵 的 变量 命名 为 mv_matrix， 并 将 用 来 保存 投影 箱 阵 的 变量 命名 为 
proj_matrix。 因 为 3D 变 换 是 4x4 的 ， 因 此 mat4 是 GLSL 着 色 器 统一 中 常用 
的 数据 类 型 。 

















将 数据 从 C++/OpenGL 应 用 程序 发 送 到 统一 变量 需要 执行 以 下 步 
PR: (Ca) 获取 统一 变量 的 引用 ; O) 将 指 辣 所 需 数值 的 指针 与 获取 的 
统一 引用 相关 联 。 在 我 们 的 立方 体例 子 中 ， 假 设 链接 的 泻 染 程序 保存 在 
名 为 “renderingProgram” 的 变量 中 ， 以 下 代码 行 表 示 ， 我 们 要 把 模型 - 视 
图 和 投影 窍 阵 发 送 到 两 个 统一 变量 mv_matrix 和 proj_matrix 中 去 : 








mvLoc = glGetUniformLocation(renderingProgram, "mv_matrix"); // 获取 着 色 
器 程序 中 统一 变量 的 位 置 














projLoc = glGetUniformLocation(renderingProgram, "proj_matrix"); 
glUniformMatrix4fv(mvLoc, 1, GL_FALSE, glm::value_ptr(mvMat)); // 将 矩阵 数 
据 发 送 到 统一 变量 中 

glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(pMat) ) ; 














在 上 面 的 例子 中 ， 我 们 假设 已 经 利用 GLM 工 具 来 构建 模型 -视图 和 
投影 矩阵 变换 mvMat 和 pMat， 稍 后 将 会 更 详细 地 讨论 。 它 们 是 mat4 类 型 
CGLM 的 一 个 类 ) 的 。GLM 函 数 调用 value_ptr(0) 返 回 对 矩阵 数据 的 引 
用 ，glUniformMatrix4fv() 需 要 将 这 些 和 矩阵 值 传 递 给 统一 变量 。 


4.3 顶点 属性 插值 


相 较 于 如 何 处 理 统一 变量 ， 了 解 如 何在 OpenGL 管 线 中 处 理 顶 点 属 
性 非常 重要 。 回 想 一 下 ， 在 片段 着 色 器 光栅 化 之 前 ， 由 顶点 定义 的 图 元 
例如， 三 角形 ) 被 转换 为 片段 。 光 栅 化 过 程 会 线性 插值 项 点 属性 值 ， 
以 便 显 示 的 像素 能 无 颖 连接 建 梗 的 曲面 。 





相 比 之 下 ， 统 一 变量 的 行为 类 似 于 初始 化 过 的 常量 ， 并 且 在 每 次 顶 
点 着 色 器 调用 《〈 即 从 缓冲 区 发 送 的 每 个 顶点 ) ea 统一 变量 本 
身 不 是 插值 的 ， 无 论 有 多 少 顶 点 ， 它 始终 包含 相同 的 值 。 





光栅 着 色 器 对 顶点 属性 进行 的 插值 在 很 多 方面 都 很 有 用 。 稍 后 ， 我 
a A 纹理 坐标 和 曲面 法 向 量 。 重 要 的 是 要 理解 
过 缓冲 区 发 送 到 顶点 属性 的 所 有 值 都 将 在 管线 中 被 进一步 插值 。 





我 们 在 顶点 着 色 器 中 看 到 顶点 属性 被 声明 为 “in”， 表 示 它 们 从 缓冲 
区 接收 值 。 顶 点 属性 还 可 以 改 为 声明 为 “out*”， 这 意味 着 它们 会 将 值 发 送 





到 管线 中 的 下 一 个 阶段 。 例 如 ， 顶 点 着 色 器 中 的 以 下 声明 将 指定 一 个 名 
为 “color” 的 顶点 属性 ， 该 属性 输出 vec4 类 型 的 值 : 


out vec4 color; 


没有 必要 为 顶点 位 置 声明 一 个 “out”* 变 量 ， 因 为 OpenGL 有 一 个 内 置 
的 vec4 变 量 用 于 此 目的 ， 它 的 名 字 叫 作 gl_Position。 在 顶点 着 色 器 中 ， 
我 们 将 矩阵 变换 应 用 于 传 入 的 顶点 (之 前 声明 为 位 置 的 顶点) ， 并 将 结 
RIRH gl Position: 








gl_Position = proj_matrix * mv_matrix * position; 





然后 ， 变 换 后 的 顶点 将 自动 输出 到 光栅 着 色 器 ， 最 终 将 相应 的 像素 
位 置 发 送 到 片段 着 色 器 。 


光栅 化 过 程 如 图 4.2 所 示 。 在 gI1DrawArrays(0 〇 函数 中 指定 
GL_TRIANGLES 时 ， 光 栅 化 是 逐个 三 角形 完成 的 。 首 先 沿 着 连接 项 点 
的 线 开始 插值 ， 其 精度 级 别 和 像素 显示 密度 相关 。 然 后 通过 沿 连接 边缘 
像 系 的 水 平 线 插值 来 填充 三 角形 的 内 部 空间 中 的 像素 。 












图 4.2 ”顶点 的 光栅 化 
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。 一 个 模型 矩阵 ; 
。 一 个 视 岁 矩阵 ; 
。 一 个 透视 和 窍 阵 。 








模型 矩阵 在 世界 坐标 空间 中 表示 对 象 的 位 置 和 朝 癌 。 每 个 模型 都 有 
目 己 的 模型 矩阵 ， 如 果 模 型 移动 ， 则 需要 不 断 重 建 该 矩阵 。 








视图 矩阵 移动 并 旋转 世界 中 的 模型 ， 以 模拟 相机 在 所 需 位 置 的 效 
果 。 回 忆 一 下 第 2 章 ，OpenGL 相 机 存在 于 位 置 (0,0,0) 并 且 面 向 负 2Z 轴 。 
为 了 模拟 以 某 种 方式 移动 的 相机 的 表现 ， 我 们 需要 向 相反 的 方向 移动 物 
体 本 身 。 例 如 ， 将 摄像 机 向 右 移动 会 导致 场景 中 的 物体 看 起 来 像 是 向 左 
移动 ; 虽然 OpenGL 相 机 是 固定 的 ， 但 我 们 可 以 通过 把 对 象 向 左 移动 的 
方式 ， 让 摄像 机 看 起 来 向 右 移动 了 。 











透视 抢 阵 是 一 种 变换 ， 它 根据 所 需 的 视 锥 提供 3D 效 末 ， 如 前 面 第 3 
章 所 述 。 








了 解 何 时 计算 每 种 类 型 的 和 窍 阵 也 很 重要 。 永 远 不 会 改变 的 矩阵 可 以 
在 initO 中 构建 ， 但 那些 会 改变 的 矩阵 需要 在 display0 中 构建 ， 以 便 为 每 
个 帧 重建 它们 。 我 们 假设 模型 是 动画 的 ， 相 机 是 可 移动 的 ， 那 么 : 








。 需要 为 每 个 模型 和 每 个 帧 都 创建 模型 矩阵 ; 


说 ， 
它们 合并 ， 并 保持 透视 矩阵 分 离 ， 有 一 些 优点 。 例 如 ， 在 顶点 着 色 器 











视图 矩阵 需要 每 帧 创建 一 次 (因为 相机 可 以 移动 )， 但 是 对 于 在 这 
一 帧 期 间 泻 染 的 所 有 对 象 ， 它 部 是 一 样 的 ; 

透视 矩阵 只 需要 创建 一 次 [在 init0 中 ] ， 它 需要 使 用 屏幕 窗口 的 名 
REAM GRE CORA ta LEAS BO) ， 除 非 调 整 窗口 大 小 ， 否 则 它 
通常 保持 不 变 。 








然后 在 display0 函 数 中 生成 模型 和 视图 转换 矩阵 ， 如 下 所 示 。 
(1) 根据 所 需 的 摄像 机 位 置 和 朝向 构建 视图 矩阵 。 

(2) 对 于 每 个 模型 ， 进 行 以 下 操作 。 

i， 根 据 模型 的 位 置 和 朝向 构建 模型 矩阵 。 

ii. 将 模型 和 视图 矩阵 结合 成 单个 “MV” 窍 阵 。 

诞 ， 将 MV 和 投影 窍 阵 发 送 到 相应 的 着 色 旨 统一 变量 。 


从 技术 上 讲 ， 没 有 必要 将 模型 和 视图 矩阵 合并 成 一 个 矩阵 。 也 就 是 
它们 也 可 以 用 单独 分 开 的 矩阵 的 形式 及 送 给 顶点 着 色 器 。 然 而 ， 将 











中 ， 模 型 中 的 每 个 顶点 都 需要 乘 以 矩阵 。 由 于 复杂 的 模型 可 能 有 数 百 甚 
至 数 千 个 顶点 ， 因 此 可 以 通过 在 将 模型 和 视图 矩阵 发 送 到 顶点 着色 需 之 
前 预先 相 乘 一 次 来 提高 性 能 。 稍 后 ， 我 们 将 看 到 为 什么 需要 将 透视 矩阵 
分 开 以 用 于 光照 的 目的 。 


4.5 ”我 们 的 第 一 个 3D 程 序 一 一 一 个 3D 立 方 体 


是 时 候 将 所 有 部 分 组 合 在 一 起 了 ! 为 了 构建 一 个 完整 的 
C++/OpenGL/GLSL 系 统 并 在 3D“ 世 界 ” 中 渲染 我 们 的 立方 体 ， 到 目前 为 
止 介绍 过 的 所 有 机 制 都 需要 被 整合 在 一 起 ， 并 完美 协调 。 我 们 可 以 重用 
我 们 之 前 在 第 2 章 中 看 到 的 一 些 代 码 。 有 具体 来 说 ， 我 们 不 会 再 重复 讲解 
以 下 这 些 用 来 读 取 包含 着 色 器 代码 的 文件 ， 编 译 和 链接 它们 ， 以 及 检测 
GLSL 错 误 的 函数 ， 事实 上 ， 回 想 一 下 ， 我 们 已 将 它们 移 到 “Utils.cpp” 文 
人 








e createShaderProgram() 
e readShaderSource() 


e checkOpenGLError() 
e printProgramLog() 
e printShaderLog() 
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的 情况 下 ， 我 们 还 需要 一 个 构建 透视 窍 阵 的 工具 函数 。 虽 然 我 们 可 以 自 
己 轻松 编写 这 样 的 函数 ， 但 GLM 已 经 包含 了 一 个 : 








glm: :perspective(<field of view>, <aspect ratio>, <near plane>, <far plane 


>); 








我 们 现在 可 以 构建 完整 的 3D 立 方 体 程序 了 ， 如 下 面 的 程序 4.1 所 
不 。 


程序 4.1 简单 的 红色 立方 体 





























C++/OpenGL 应 用 程序 


#include <GL\glew.h> 
#include <GLFW\glfw3.h> 


#include <string> 

#include <iostream> 

#include <fstream> 

#include <cmath> 

#include <gim\glm.hpp> 

#include <glm\gtc\type_ptr.hpp> 
#include <glm\gtc\matrix_transform.hpp> 
#include "Utils.h" 

using namespace std; 


#define numVAOs 1 
#define numVBOs 2 


float cameraX, cameraY, cameraZ; 
float cubeLocX, cubeLocY, cubeLocZ; 
GLuint renderingProgram; 

GLuint vao[numVAOs ] ; 

GLuint vbo[numVBOs]; 





// 分 配 在 display() 函数 中 使 用 的 变量 空间 ， 这 样 它们 就 不 必 在 演 染 过 程 中 分 配 
GLuint mvLoc, projLoc; 

int width, height; 

float aspect; 

glm: :mat4 pMat, vMat, mMat, mvMat; 




















void setupVertices(void) { // 36 个 顶点 ，12 个 三 角形 ， 组 成 了 放置 在 原点 处 的 2x 
2x2 立 方 体 
float vertexPositions[108] = { 

-1.0f, 1.0f, -1.0f, -1.0f, -1.0f, -1.6f, 1.0f, -1.0f, -1.0f, 
1.0f, -1.0f, -1.0f, 1.0f, 1.0f, -1.0f, -1.0f, 1.0f, -1.0f, 
1.0f, -1.0f, -1.0f, 1.0f, -1.0f, 1.0f, 1.0f, 1.0f, -1.0f, 
1.0f, -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f, -1.0f, 
1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 
-1.0f, -1.0f, 1.0f, -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 
-1.0f, -1.0f, 1.0f, -1.0f, -1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 
-1.0f, -1.0f, -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 
-1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f, 1.0f, -1.0f, -1.0f, 
1.0f, -1.0f, -1.0f, -1.0f, -1.0f, -1.0f, -1.0f, -1.0f, 1.0f, 
-1.0f, 1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f, 1.0f, 1.0f, 
1.0f, 1.0f, 1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f, -1.0f 











}; 

glGenVertexArrays(1, vao); 
glBindVertexArray(vao[@]); 
glGenBuffers(numVBOs, vbo); 


glBindBuffer(GL_ARRAY_ BUFFER, vbo[®@]); 
glBufferData(GL_ARRAY_BUFFER, sizeof(vertexPositions), vertexPositions, 


GL_STATIC_DRAW) ; 
} 


void init(GLFWwindow* window) { 

renderingProgram = Utils: :createShaderProgram("vertShader.glsl", "frags 
hader.gls1"); 

cameraX = 0.6f; cameraY = 0.60f; cameraZ = 8.0f; 

cubeLocX = @.@f; cubeLocY = -2.6f; cubeLocZ = 6.6f; // 沿 Y 轴 下 移 以 展示 透 
视 

setupVertices(); 


} 























void display(GLFWwindow* window, double currentTime) { 
glClear(GL_DEPTH_BUFFER BIT); 
glUseProgram(renderingProgram) ; 














// SRE FE REMIR EE A) 250 — EE 
mvLoc = glGetUniformLocation(renderingProgram, "mv_matrix"); 
projLoc = glGetUniformLocation(renderingProgram, "proj matrix"); 











// 构建 透视 矩阵 

glfwGetFramebufferSize(window, &width, &height) ; 

aspect = (float)width / (float)height; 

pMat = glm::perspective(1.0472f, aspect, @.1f, 1000.0f); // 1.0472 radi 
ans = 66 degrees 





// 构建 视图 矩阵 、 模 型 矩阵 和 视图 -模型 矩阵 

vMat = glm::translate(glm::mat4(1.0f), glm::vec3(-cameraX, -cameraY, -c 
ameraZ)); 

mMat = glm::translate(glm: :mat4(1.0f), glm::vec3(cubeLocX, cubeLocY, cu 
beLocZ)); 

mvMat = vMat * mMat; 








// 将 透视 矩阵 和 MV 和 矩阵 复制 给 相应 的 统一 变量 
glUniformMatrix4fv(mvLoc, 1, GL_FALSE, glm::value_ptr(mvMat)) ; 
glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(pMat) ); 





// 将 VB0 关 联 给 顶点 着 色 器 中 相应 的 顶点 属性 
glBindBuffer(GL_ARRAY_BUFFER, vbo[ð]); 
glVertexAttribPointer(@, 3, GL_FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray(@) ; 








// 调整 OpenGL 设 置 ， 绘 制 模型 
glEnable(GL_DEPTH_TEST); 
glDepthFunc(GL_LEQUAL) ; 
glDrawArrays(GL_TRIANGLES, ©, 36); 





NI 


int main(void) { // main() 和 之 前 的 没有 变化 
if (!glfwInit()) { exit(EXIT_FAILURE); } 
glfwWindowHint(GLFW_CONTEXT_VERSION MAJOR, 4); 
glfwWindowHint(GLFW_CONTEXT_VERSION MINOR, 3); 
GLFWwindow* window = glfwCreateWindow(600, 600, "Chapter 4 - program 1 
", NULL, NULL); 
glfwMakeContextCurrent (window) ; 
if (glewInit() != GLEW OK) { exit(EXIT_FAILURE); } 
glfwSwapInterval(1); 





init (window) ; 


while (!glfwWindowShouldClose(window)) { 
display(window, glfwGetTime()); 
glfwSwapBuf fers (window) ; 
glfwPollEvents(); 

} 

glfwDestroyWindow(window); 

glfwTerminate() ; 

exit(EXIT_SUCCESS) ; 


} 


顶点 着 色 器 (文件 名 : “vertShader.glsl”) 























#version 430 
layout (location=@) in vec3 position; 


uniform mat4 mv_matrix; 
uniform mat4 proj_matrix; 


void main(void) 
{ gl Position = proj_matrix * mv_matrix * vec4(position,1.0); 


} 
片段 着 色 器 (文件 名 : “fragShader.gls1”) 








#version 430 
out vec4 color; 


uniform mat4 mv_matrix; 
uniform mat4 proj_matrix; 


void main(void) 
{ color = vec4(1.0, 0.0, 0.0, 1.0); 


Dt 

程序 4.1 的 输出 如 图 4.3 所 示 “〈 见 彩 插 ) 。 让 我 们 仔细 看 看 程序 4.1 中 
的 代码 。 重 要 的 是 ， 我 们 要 了 解 所 有 部 分 的 工作 原理 以 及 它们 如 何 协同 
APs 














图 4.3 ”程序 4.1 的 输出 。 从 (0,0,8) 看 位 于 (0,-2,0) 的 红色 立方 体 








下 面 查看 由 initO 调 用 的 函数 setupVerticesO0。 在 此 函数 的 开头 ， 声 明 
一 个 名 为 vertexPositions 的 数组 ， 其 中 包含 36 个 组 成 立方 体 的 项 点。 首先 
你 可 能 想 知道 为 什么 这 个 立方 体 有 36 个 顶点 ， 逻 辑 上 一 个 立方 体 应 该 只 
需要 8 个 项 点。 答案 是 我 们 需要 用 三 角形 来 构建 我 们 的 立方 体 ， 因 此 6 个 
立方 体面 中 的 每 一 个 都 需要 由 两 个 三 角形 构成 ， 总 共 6x2=12 个 三 角形 
〈 见 图 4.4) 。 由 于 每 个 三 角形 由 3 个 顶点 指定 ， 因 此 总 共有 36 个 顶点 。 
由 于 每 个 顶点 具有 3 个 值 (x, y, z)， 因 此 数组 中 总 共有 36x3=108 个 值 。 确 
实 ， 每 个 项 点 都 参与 了 多 个 三 角形 的 组 成 ， 但 我 们 仍然 分 别 指定 每 个 顶 
点 ， 因 为 现在 我 们 会 将 每 个 三 角形 的 顶点 分 别 发 送 到 管线 。 





图 4.4 由 三 角形 组 成 的 立方 体 








立方 体 在 它 自 己 的 坐标 系 中 定义 ， 中 心 为 (0,0,0)， 它 的 角 在 X、Y 和 和 
Z 这 3 条 轴 上 分 别 位 于 -1.0 一 +1.0。setupVerticesO 的 其 余部 分 建立 了 VAO 
和 两 个 VBO《〈 尽 管 只 使 用 了 一 个 ) 并 将 立方 体 项 点 加 载 到 第 0 个 VBO 组 
冲 区 中 。 


请 注意 ，init(0) 函 数 负 责 执行 只 需要 执行 一 次 的 任务 : ERA EAA 
人 码 并 构建 演 染 程序 ， 并 将 立方 体 顶点 加 载 到 VBO 中 [通过 调用 
setupVertices()]。 请 注意 ， 它 还 给 定 了 立方 体 和 相机 在 世界 中 的 位 置 。 
稍 后 我 们 将 为 立方 体 设置 动画 ， 并 了 解 如 何 移 动 相机 ， 到 那个 时 候 我 们 
可 能 需要 去 除 这 个 固定 的 位 置 。 


现在 让 我 们 看 一 下 display0) 函 数 。 回 想 一 下 ，display0) 可 以 被 重复 调 
用 ， 并 且 调 用 它 的 速率 被 称 为 巅 率 。 也 就 是 说 ， 通 过 不 断 地 快速 绘制 和 
重 绘 场景 或 帧 ， 就 可 以 实现 动画 。 通 常 需 要 在 泻 染 帧 之 前 清除 深度 缓冲 
区 ， 以 便 正 确 地 进行 隐藏 面 消除 〈 不 清除 深度 缓冲 区 有 时 会 导致 每 个 曲 





面 都 被 移 除 ， 从 而 导致 完全 黑屏 ) 。 默 认 情 况 下 ，OpenGL 中 的 深度 值 
范围 为 0.0 一 1.0。 调 用 glClear(GL_DEPTH_BUFFER_BIT) 就 可 以 清除 深 
度 缓 冲 区 ， 这 会 使 用 默认 值 〈 通 常 为 1.0) 来 填充 深度 缓冲 区 。 


接 下 来 ，display0O 通 过 调用 glUseProgram() 来 启用 着 色 器 ， 在 GPU 上 
安装 GLSL 人 代码。 回想 一 下 ， 这 并 不 会 运行 着 色 器 程序 ， 但 它 会 让 后 续 
的 OpenGL 调 用 能 够 确定 着 色 器 的 顶点 属性 和 统一 变量 位 置 。display() 函 
数 接 下 来 获取 统一 变量 位 置 ， 构 建 透视 、 视 图 和 模型 矩阵 中， 将 视图 和 
模型 矩阵 结合 成 单一 的 MV 和 矩阵， 并 将 透视 和 MV 矩阵 赋值 给 它们 相应 
的 统一 变量 。 在 这 里 ， 值 得 注意 的 是 对 translateO0 函 数 的 GLM 调 用 的 形 
式 : 








vMat = glm::translate(glm::mat4(1.0f), glm::vec3(-cameraX, -cameraY, -came 





raZ)); 
FERA A BE ed FS SE DB SE RE 从 单位 


EFi EH glm::mat4(1.0fy Mice 20) ADA fa ee A cs ze 2 RA 
(使 用 glm::vec3(x,y,z) 构 造 函 数 ) 。 许 多 GLM 变 换 操作 使 用 这 种 方法 。 


接 下 来 ，displayO 函 数 忆 用 了 包含 立方 体 顶 点 数据 的 缓冲 区 ， 并 将 
其 附加 到 第 0 个 顶点 属性 ， 以 准备 将 顶点 数据 发 送 到 着 色 器 。 








display() 函 数 做 的 最 后 一 件 事 是 通过 调用 glDrawArrays() 来 绘制 模 
型 ， 指 定 模型 由 三 角形 组 成 并 且 总 共有 36 个 顶点 。 对 glDrawArrays0) 的 
调用 通常 在 其 他 调整 这 个 模型 的 演 染 设置 的 命令 之 前 。 轩 在 这 个 例子 
中 ， 有 两 个 这 样 的 命令 ， 这 两 个 命令 都 与 深度 测试 相关 。 回 忆 一 下 第 2 





F, OpenGL (i Hii 2 WR ETT Be BR FEI, RIUS HARE 
MWR Ts xe i 22 OpenGL (8 AY AUR EVAR REM. EAR AN FY BC ET D3 2 
章 中 的 说 明 ; 在 本 书 的 后 续 内 容 中 ， 我 们 将 看 到 这 些 命令 的 其 他 用 途 。 








最 后 ， 说 一 说 着 色 器 。 首 先 ， 请 注意 它们 都 包含 相同 的 统一 变量 声 
明 块 。 虽然 并 不 总 是 一 定 要 这 样 做 ， 但 在 特定 演 染 程序 中 的 所 有 着 色 吕 
中 包含 相同 的 统一 变量 声明 块 通常 是 一 种 好 习惯 。 











还 要 注意 ， 顶 点 着 色 器 中 传 入 的 顶点 属性 的 position 变 量 上 是 否 存 
在 layout 修 饰 符 。 由 于 它 的 位 置 被 指定 为 “<0”， 因 此 display0 函 数 可 以 人 简 
单 地 通过 在 glVertexAttribPointer() 孙 数 调用 的 第 一 个 参数 和 
glEnableVertexAttribArray() 冰 数 调用 中 使 用 0 来 引用 此 变量 。 请 注意 ， 
position 顶 点 属性 被 声明 为 vec3 类 型 ， 因 此 需要 将 其 转换 为 vec4 类 型 ， 以 
便 与 将 要 用 它 乘 以 的 4x4 和 矩阵 兼容 。 这 个 转换 是 用 vec4(position,1.0) 完 成 
的 ， 它 用 名 为 "position” 的 变量 构建 一 个 vec4， 在 新 添加 的 第 四 个 点 中 放 
置 一 个 值 1.0。 


顶点 着 色 器 中 的 乘法 将 矩阵 变换 应 用 于 顶点 ， 将 其 转换 为 相机 空间 
《请 注意 从 右 到 左 的 结合 顺序 ) 。 这 些 值 被 放 入 内 置 的 OpenGL 输 出 变 
量 gl_Position 中 ， 然 后 继续 通过 管线 并 由 光栅 着 色 器 进行 插值 。 








然后 插值 后 的 像素 位 置 〈 称 为 片段 ) 被 发 送 到 片段 着 色 器 
(Fragment Shader) 。 回 想 一 下 ， 片 段 着 色 器 的 主要 目的 是 设置 输出 像 
素 的 颜色 。 以 类 似 于 顶点 着 色 器 的 方式 ， 片 段 着 色 器 逐个 处 理 像 素 ， 并 
为 每 个 像素 单独 调用 。 在 我 们 的 例子 中 ， 它 固定 地 输出 对 应 于 红色 的 








值 。 由 于 前 面 指出 的 原因 ， 统 一 变量 已 包含 在 片段 着 色 器 中 ， 即 使 它们 
在 此 示例 中 并 未 被 使 用 。 


图 4.5 展 示 了 从 C++/OpenGL 应 用 程序 开始 并 通过 管线 的 数据 流 概 


ee 
C++/OpenGL 
应 用 程序 


顶点 着 色 器 光栅 着 色 器 片段 着 色 器 





图 4.5 ”程序 4.1 的 数据 流 





让 我 们 对 着 色 器 进行 一 些 轻微 的 修改 。 特 别 是， 我 们 将 根据 每 个 顶 
点 的 位 置 为 每 个 顶点 指定 一 种 颜色 ， 并 将 该 颜色 放 在 输出 的 顶点 属性 
varyingColor 中 。 同 样 ， 修 改 片 段 着 色 器 以 接收 传 入 的 颜色 〈 由 光栅 着 
色 器 插值 ) 并 使 用 它 来 设置 输出 像素 的 颜色 。 fee 
乘 以 V2， 然后 加 1/2， 以 将 取 值 范围 从 [-1...+1] 转 换 为 [0...1]。 还 要 注意 
的 是 ， 通 常 约定 在 程序 员 定 义 的 插值 顶点 属性 变量 名 称 中 包含 单 
词 “varying”。 每 个 着 色 器 中 的 更 改 都 被 高 亮 了 了， 结果 如 下 所 示 。 





(EOC AY Ua ae: 





#version 430 


layout (location=@) in vec3 position; 
uniform mat4 mv_matrix; 
uniform mat4 proj_matrix; 


out vec4 varyingColor; 


void main(void) 
{ gl Position = proj_matrix * mv_matrix * vec4(position,1.0); 
varyingColor = vec4(position,1.0) * 0.5 + vec4(@.5, @.5, 0.5, 0.5); 





修改 后 的 片段 着 色 器 : 


#version 430 
in vec4 varyingColor; 
out vec4 color; 


uniform mat4 mv_matrix; 
uniform mat4 proj_matrix; 


void main(void) 
{ color = varyingColor; 








请 注意 ， 因 为 颜色 是 从 顶点 着 色 器 在 顶点 属性 〈varyingColor) 中 
发 出 的 ， 所 以 它们 也 由 光栅 着 色 器 进行 插值 ! 它 的 效果 可 以 在 图 
4.6 ORE) 中 看 到 ， 从 一 个 角 到 另 一 个 角 的 颜色 在 整个 立方 体 中 明 
显 是 被 插值 了 。 











图 4.6 ”有 插值 颜色 的 立方 体 











另 请 注意 ， 顶 点 着 色 器 中 的 “out" 变 量 varyingColor 也 是 片段 着 色 器 
中 的 “in” 变 量 。 两 个 着 色 器 知道 顶点 着 色 器 中 的 哪个 变量 提供 片段 着 色 
器 中 的 哪个 变量 ， 因 为 它们 在 两 个 着 色 器 中 具有 相同 的 名 


称 “varyingColor”。 


由 于 我 们 的 main(0) 函 数 包含 一 个 泻 染 循环 ， 我 们 可 以 像 在 程序 2.6 中 
那样 为 我 们 的 立方 体 设置 动画 ， 方 法 是 使 用 基于 时 间 变 化 的 平移 和 旋转 
来 构建 模型 矩阵 。 例 如 ， 程 序 4.1 中 display0 函 数 中 的 代码 可 以 修改 如 下 

(突出 显示 更 改 ) : 








glClear(GL_DEPTH_ BUFFER BIT); 
glClear(GL COLOR BUFFER BIT); 








// 使 用 当前 时 间 来 计算 x，y 和 z 的 不 同 变换 

tMat = glm::translate(glm::mat4(1.0f), 
glm::vec3(sin(@.35f*currentTime)*2.0f, cos(@.52f*currentTime)*2.0f, sin 

(@.7f*currentTime)*2.0Ff)); 

rMat = glm::rotate(glm: :mat4(1.0f), 1.75f*(float)currentTime, glm::vec3(@. 

ef, 1.0f, 0.6f)); 

rMat = glm::rotate(rMat, 1.75f*(float)currentTime, glm::vec3(1.0f, 0.0f, © 

.OF)); 


rMat = glm::rotate(rMat, 1.75f*(float)currentTime, glm::vec3(@.0f, 0.0f, 1 


.of) ) ; 
// 用 1.75 来 调整 旋转 速度 





mMat = tMat * rMat; 
ERARE EREHE (以 及 各 种 三 角 函 数 ) 会 使 立方 体 看 起 
来 在 空间 中 翻滚 。 请 注意 ， 添 加 此 动画 说 明了 每 次 通过 display0) 清 除 深 


度 缓 冲 区 以 确保 正确 进行 隐藏 面 消除 的 重要 性 。 如 图 4.6 所 示 ， 它 还 需 
要 清除 颜色 缓冲 区 ; 否则， 立方 体会 在 移动 时 留 下 痕迹 。 








translate() 和 rotate() 疯 数 是 GLM 库 的 一 部 分 。 男 外 ， 请 注意 最 后 
行 中 的 矩阵 乘法 一 一 操作 中 tMat 和 rMat 的 顺序 很 重要 。 它 计算 两 个 变换 
的 结合 ， 平 移 放 在 左边 ， 旋 转 放 在 右边 。 当 顶点 随后 乘 以 此 矩阵 时 ， 计 
算 从 石 到 左 进行 ， 这 意味 着 首先 完成 旋转 ， 然 后 才 是 平移 。 变 换 的 应 用 
顺序 很 重要 ， 改 变 顺序 会 导致 不 同 的 行为 。 图 4.7 显 示 了 为 立方 体 设 置 

















了 动画 后 显示 的 一 些 帧 。 


为 3D 立 方 体 设置 动画 〈“ 翻 滚 ”) 








图 4.7 


46 泻 染 一 个 对 象 的 多 个 副本 


现在 将 我 们 学 到 的 知识 扩展 到 演 染 多 个 对 象 。 在 我 们 解决 在 单个 场 


景 中 泻 染 多 种 不 同 的 模型 的 常见 情况 之 前 ， 让 我 们 先 考 虑 更 简单 的 情形 
同一 模型 多 次 出 现 。 例 如 ， 假 设 我 们 希望 扩展 前 面 的 示例 ， 以 便 呈 
现 * 一 大 群 ”〈24 个 ) 翻滚 的 立方 体 。 我 们 可 以 将 displayO 函 数 中 构建 MV 
和 矩阵 并 绘制 立方 体 的 代码 (如 下 所 示 突 出 显示 部 分 ) ， 移 动 到 一 个 执行 
24 次 的 循环 中 来 完成 此 操作 。 我 们 利用 循环 变量 来 计算 立方 体 的 旋转 和 
平移 参数 ， 以 便 每 次 绘制 立方 体 时 ， 都 会 构建 不 同 的 模型 矩阵 。 RA] 
还 将 摄像 机 放置 在 正 Z 轴 的 下 方 ， 这 样 我 们 就 可 以 看 到 所 有 的 立方 

体 。) 图 4.8 显 示 了 一 帧 由 此 产生 的 动画 场景 。 











void display(GLFWwindow* window, double currentTime) { 


for (i=@; i<24; i++) 
{ tf = currentTime + i; // tf == "time factor〔 时 间 因 子 )"， 声 明 为 浮 点 





tMat = glm::translate(glm: :mat4(1.0f), glm::vec3(sin(.35f*tf)*8.0f, c 
os(.52f*tf)*8.0Ff, 


sin(.70f*tf)*8.0f)); 

rMat = glm::rotate(glm::mat4(1.0f), 1.75f*tf, glm::vec3(0.0f, 1.0f, © 
.OF)); 

rMat = glm::rotate(rMat, 1.75f*tf, glm::vec3(1.0f, 8.6f, 8.6f)); 

rMat = glm::rotate(rMat, 1.75f*tf, glm::vec3(0.0f, 8.6f, 1.0f)); 

mMat tMat * rMat; 

mvMat = vMat * mMat; 


glUniformMatrix4fv(mvLoc, 1, GL_FALSE, glm::value_ptr(mvMat) ) ; 
glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(pMat) ); 


glBindBuffer(GL_ARRAY_BUFFER, vbo[@]); 
glVertexAttribPointer(@, 3, GL_FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray (@) ; 


glEnable(GL_DEPTH_TEST); 
glDepthFunc(GL_LEQUAL) ; 
glDrawArrays(GL_TRIANGLES, ©, 36); 











图 4.8 “多 个 翻滚 的 立方 体 
实例 化 


实例 化 〈Instancing) 提供 了 一 种 机 制 ， 可 以 只 用 一 个 C++/OpenGL 
调用 就 告诉 显卡 泻 染 一 个 对 象 的 多 个 副本 。 这 可 以 带 来 显著 的 性 能 好 
处 ， 特 别 是 当 有 数 干 甚至 数 百 万 的 对 象 被 绘制 时 一 一 例如 泻 染 在 场地 中 
的 许多 花 东 的 时 候 。 








我 们 首先 将 我 们 的 C++/OpenGL 应 用 程序 中 的 glDrawArraysO 调 用 改 
AglDrawArrays- Instanced0。 这 样 ， 我 们 束 可 以 要 求 OpenGL 绘 制 尽 可 
能 多 的 副本 。 我 们 可 以 指定 绘制 如 下 24 个 立方 体 : 


glDrawArraysInstanced(GL_TRIANGLES, ©, 36, 24); 


使 用 实例 化 时 ， 顶 点 着 色 器 可 以 访问 内 置 变 量 gl_InstanceID， 这 是 
一 个 整数 ， 指 向 当前 正在 处 理 对 象 的 第 几 个 实例 。 


为 了 使 用 实例 化 来 重复 我 们 以 前 的 翻 深 立方 体 示例 ， 我 们 需要 将 构 
建 不 同 模型 矩阵 的 计算 [先前 在 display0 中 的 循环 内 实现 ] 移 动 到 顶点 着 
色 器 中 。 由 于 GLSL 不 提供 平移 或 旋转 函数 ， 并 且 我 们 无 法 从 着 色 器 内 
部 调用 GLM， 因 此 我 们 需要 使 用 程序 3.1 中 的 工具 函数 。 我 们 还 需要 将 
CR a eels 过 统一 变量 传递 给 顶点 着 色 
器 。 我 们 还 需要 将 模型 和 视图 矩阵 传递 到 单独 的 统一 变量 中 ， 因 为 对 每 
ee 要 进行 旋转 计算 。 我 们 对 代码 的 修改 ， 包 括 
C++/OpenGL 应 用 程序 中 的 修改 以 及 新 的 顶点 着 色 器 中 的 修改 ， 如 程序 
4.2 所 示 。 





程序 4.2 ”实例 化 一 一 24 个 动画 立方 体 























顶点 着 色 器 : 





#version 430 
layout (location=@) in vec3 position; 


uniform mat4 m_matrix; // 这 些 是 分 开 的 模型 和 视图 矩阵 
uniform mat4 v_matrix; 
uniform mat4 proj_matrix; 


uniform float tf; // 用 于 动画 和 放置 立方 体 的 时 间 因 子 








out vec4 varyingColor; 





mat4 buildRotateX(float rad); // Fe REAR TE RAIE H 
mat4 buildRotateY(float rad); // GLSL 要 求 函 数 先 声明 后 调用 
mat4 buildRotateZ(float rad); 

mat4 buildTranslate(float x, float y, float z); 











void main(void) 
{ float i = gl_InstanceID+ tf; // 取 值 基于 时 间 因 子 ， 但 是 对 每 个 立方 体 示 例 也 
都 是 不 同 的 











float a = sin(2.0 * i) * 8.0; // 这 些 是 用 来 平移 的 x、y、z 分 量 
float b= -sin(3.@ * <1) = EO 
float @ = Simaa = n 28.503 


// 构建 旋转 和 平移 矩阵 ， 将 会 应 用 于 当前 立方 体 的 模型 矩阵 





mat4 localRotX = buildRotatex(1000*i) ; 
mat4 localRotY = buildRotateY(1000*i) ; 
mat4 localRotZ = buildRotateZ(1000*i) ; 
mat4 localTrans = buildTranslate(a,b,c); 


// 构建 模型 和 矩阵， 然后 是 模型 -视图 矩阵 

mat4 newM matrix = m matrix * localTrans * localRotX * localRotY * local 
RotZ; 

mat4 mv_matrix = v_matrix * newM_matrix; 








gl Position = proj matrix * mv_matrix * vec4(position,1.9@); 
varyingColor = vec4(position,1.0) * 0.5 + vec4(@.5, 0.5, @.5, 0.5); 
} 


// 构建 平移 矩阵 的 工具 函数 〈 来 自 第 3 章 ) 
mat4 buildTranslate(float x, float y, float z) 
{ mat4 trans = mat4(1.0, 0.0, 0.0, 0.0 
Q@.0, 1.0, 0.0, 0.0, 
0.0, @.0, 1.0, 0.0 
X, Vs Z, 1.0 )3 
































return trans; 


} 
// 用 来 绕 X Y, Z 轴 旋 转 的 类 似 函 数 〈 也 来 自 第 3 章 ) 
































C++/OpenGL 应 用 程序 〈 在 display() 函 数 中 ) 


// 构建 (和 变换 ) mMat 的 计算 被 移动 到 顶点 着 色 嚣 中 去 了 
// 在 C++ 应 用 程序 中 不 再 需要 构建 MV 矩阵 
glUniformMatrix4fv(vLoc, 1, GL_FALSE, glm::value_ptr(vMat));  // 着 色 器 
需要 视图 算 阵 的 统一 变量 







































































timeFactor = ((float)currentTime) ; // ALR 
得 时 间 因 子 信息 

tfLoc = glGetUniformLocation(renderingProgram, "tf"); // (着 色 
器 也 需要 它 ) 


glUniform1f(tfLoc, (float)timeFactor); 


glDrawArraysInstanced(GL_TRIANGLES, ©, 36, 24); 





程序 4.2 的 输出 结果 与 前 一 个 示例 相同 ， 可 以 在 前 面 的 图 4.8 中 看 
到 。 


实例 化 让 我 们 可 以 极 大 地 扩展 对 象 的 副本 数量 ; 在 这 个 例子 中 ， 即 
使 对 于 很 普通 的 GPU， 实 现 100 000 个 立方 体 的 动画 仍然 是 可 行 的 。 对 
代码 的 更 改 主要 是 一 些 常 量 的 修改 ， 是 为 了 将 大 量 立方 体 进一步 分 散 
FF, 如 下 所 示 。 


顶点 着 色 器 如 下 : 


float a = sin(203.0 * i/8000.0) * 403.0; 


float b = cos(301.0 * i/4001.0) * 401.0; 
float c = sin(400.0 * i/6003.0) * 405.0; 





C++/OpenGL 应 用 程序 如 下 : 











cameraz = 420.0f; // 将 摄像 机 沿 着 z 轴 再 移 远 一 些 ， 以 看 到 更 多 的 立方 体 














glDrawArraysInstanced(GL_TRIANGLES, ©, 36, 100000); 





输出 结果 如 图 4.9 所 示 。 





图 4.9 ”实例 化 : 100 000 个 动画 立方 体 
4.7 ”在 同一 个 场景 中 演 染 多 个 不 同 模型 


要 在 单个 场景 中 泻 染 多 个 模型 ， 一 种 简单 的 方法 是 为 每 个 模型 使 用 
单独 的 缓冲 区 。 每 个 模型 都 需要 目 己 的 模型 矩阵 ， 这 样 我 们 就 需要 为 我 
们 泻 染 的 每 个 模型 生成 一 个 新 的 模型 -视图 矩阵 。 还 需要 为 每 个 模型 单 
独 调用 gljDrawArrays()。 因 此 ， 我 们 需要 修改 init() 和 display0 函 数 。 





男 一 个 考虑 因素 是 我 们 是 否 需 要 为 我 们 想 要 绘制 的 每 个 对 象 使 用 不 
同 的 着 色 器 或 不 同 的 泻 染 程序 。 事 实证 明 ， 在 许多 情况 下 ， 我 们 可 以 为 
我 们 绘制 的 各 种 对 象 使 用 相同 的 着 色 器 《〈 以 及 相同 的 演 染 程序 ) 。 只 有 
当 它 们 由 不 同 的 图 元 (例如 线 而 不 是 三 角形 ) 组 成 ， 或 者 涉及 复杂 的 照 
明 或 其 他 效果 的 时 候 ， 我 们 才 会 需要 为 各 种 对 象 使 用 不 同 的 泻 染 程序 。 
目前 并 没有 这 么 复杂 ， 因 此 我 们 可 以 重用 相同 的 顶点 和 片段 着 色 器 ， 而 
只 需 修 改 我 们 的 C++/OpenGL 应 用 程序 ， 以 便 在 调用 displayO 时 将 各 个 模 
型 及 送 给 管线 。 





让 我 们 继续 添加 一 个 简 蛙 的 金字 塔 ， 这 样 我 们 的 场景 就 包括 一 个 江 
方 体 和 一 个 金字 塔 。 程 序 4.3 中 显示 了 对 代码 的 相关 修改 。 我 们 突出 显 
示 了 一 些 关 键 细节 ， 例 如 当 我 们 指定 使 用 这 个 还 是 那个 缓冲 区 的 地 方 ， 
以 及 我 们 指定 模型 中 包含 的 顶点 数 的 地 方 。 注 意 ， 金 字 塔 由 6 个 三 角形 
组 成 一 一 侧面 4 个 ， 底 面 2 个 ， 总 共 6x3=18 个 顶点 。 


含 并 方 体 和 人 金字塔 的 场景 显示 结果 如 图 4.10 所 示 。 





里 序 4.3 ”立方 体 和 





5l 





<a 


void setupVertices() { 

float cubePositions[108] = 
Of, =<1,0£, =1.0£, =—1.0£, 1.i0f, <—1.0£, =L: 0E; 
Ofr L20f; Lit, =L. 08, 10E; 1608, =L: 0f; 
立方 体 项 点 网 数据 和 以 前 一 样 













// 金字 塔 有 18 AMA. HN 个 三 角形 组 成 (侧面 4 个， 底面 2 个 ) 
float pyramidPositions\54] = 
{ -1.0£, -1.0 Isf INOS; 10E 2.06, O02, A0fy OE // 前 面 

LOE —Ls0f; Of, L20 SL.08, LD O08, Ln0f, 020; // 右面 

LOE .=L.0f, -AOE la =1.0£, —1.0£, 0.08, 1s0£,. 00F, // 后 面 

-1.0f, -1.0f, -1.0£,. 1.0£, O.0£, 1.0€,, O.0£, // 左面 

-1.0f, -1.0f, -1. 1.0£,\=1.0£, 1.0£, =1.0£, =-1.0f, 1.0£; // JEW — wE 

1.0f; —T.0F, Lad Of; <ls GE, L20f, —120£, -1,0 // 底面 一 右 后 一 半 
te 
glGenVertexArrays (nurmV 
g1lBindVertexArray (vao[0] 
glGenBuffers (numVBOs, vbo // 我 人 











a 


// 我 们 需要 至 少 1 个 VAO 
需要 至 少 2 个 VBO 


glBindBuffer (GL_ARRAY_BUFFE 
g1lBufferData (GL ARRAY BUFFER, 


vbo[0]); 
sizeof (cubePositions), cubePositions, GL STATIC DRAW); 


glBindBuffer (GL ARRAY BUFFER, vbo[1]); 
glBufferData (GL ARRAY BUFFER, sizeof (pyramidPositions), pyramidPositions, GL STATIC DRAW); 


void display (GLFWwindow* window, double currentTime) { 
// 像 之 前 一 样 清除 颜色 和 深度 缓冲 区 〈 此 处 省 略 ) 
// 像 之 前 一 样 使 用 演 染 程序 并 获取 统一 变量 位 置 《 此 处 省 略 ) 
// 像 之 前 一 样 计算 投 影 矩 阵 《〈 此 处 省 略 ) 


// 只 计算 一 次 视图 窍 阵 ， 用 于 两 个 对 象 
vMat = glm::translate(glm::mat4(1.0f), glm::vec3(-cameraX, -cameraY, -cameraZ)); 
// 绘制 立方 体 〈 使 用 0 号 缓冲 区 ) 


mMat = glm::translate(glm::mat4(1.0f), glm::vec3(cubeLocxX, cubeLocY， cubeLocZ) ) 
mvMat = vMat * mMat; 


glUniformMatrix4fv(mvLoc, 1, GL FALSE, glm::value_ptr(mvMat) ); 
glUniformMatrix4fv(projLoc, 1, GL FALSE, glm: :value ptr (pMat)); 


glBindBuffer (GL ARRAY BUFFER, vbo[0]); 
glvertexAttribPointer(0, 3, GL FLOAT, GL_ FALSE, 0, 0); 
glEnableVertexAttribArray (0); 


glEnable(GL_DEPTH_TEST) ; 
glDepthFunc (GL_LEQUAL) ; 
glDrawArrays(GL_TRIANGLES, 0, 36); 


// 绘制 金字 塔 〈 使 用 1 号 缓冲 区 ) 


mMat = glm::translate(glm::mat4(1.0f), glm: :vec3 (pyrLocX, pyrLocY, pyrLocZ)); 
mvMat = vMat * mMat; 


glUniformMatrix4fv(mvLoc, 1, GL_FALSE, glm: :value ptr (mvMat)); 
glUniformMatrix4fv(projLoc, 1, GL FALSE, glm: :value ptr (pMat)); 


glBindBuffer (GL ARRAY BUFFER, vbo[1]); 
glVertexAttribPointer(0, 3, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (0); 


glEnable(GL_DEPTH_TEST) ; 
glDepthFunc (GL_LEQUAL) ; 
glDrawArrays (GL TRIANGLES, 0, 18); 





图 4.10”3D 立 方 体 和 金字塔 





关于 程序 4.3 的 其 他 一 些 值 得 注意 的 小 细节 如 下 所 示 。 





。 需要 声明 变量 pyrLocX、pyrLocY 和 pyrLocZ， 然 后 在 init() 中 将 它们 
初始 化 为 所 需 的 金字 塔 的 位 置 ， 就 像 对 立方 体位 置 所 做 的 那样 。 
。 在 display0) 的 开始 构建 视图 矩阵 vyMat， 然 后 在 立方 体 和 人 金字塔 的 模 

型 -视图 矩阵 中 都 用 到 。 
。 顶点 和 片段 着 色 器 代码 被 省 略 了 一 一 它们 和 4.5 节 中 的 一 样 。 





4.8 ”矩阵 堆栈 


med 我 们 泻 染 的 模型 都 是 由 一 组 顶点 构成 的 。 然 而 ， 实 际 
上 我 们 通常 希望 通过 组 闭 较 小 的 简单 模型 来 构建 复 淋 的 模型 。 例 如 ， 可 
以 通过 分 别 绘 制 头 部 、 身 体 、 腿 部 和 手 辟 来 创建 “机 器 人 ” on 这 当 
中 每 个 部 件 都 是 一 个 单独 的 模型 。 以 这 种 方式 构建 的 对 象 通常 称 为 分 层 











PAY AEN ERA PRE aS) ee ER as Py BO EAT 
完美 协调 一 一 否则 机 占 人 可 能 会 散 成 儿 块 ! 





分 层 模型 不 仅 可 用 于 构建 复杂 对 象 一 一 它们 还 可 以 用 来 生成 复杂 场 
景 。 例 如 ， 考 虑 一 下 我 们 的 行星 地 球 围绕 太阳 旋转 的 方式 ， 以 及 月 球 转 
绕 地 球 旋转 的 方式 。 这 样 的 一 个 场景 如 图 4.115 所 示 。 计 算 月 球 在 太空 
中 的 实际 路 径 可 能 很 复杂 。 然 而 ， 如 果 我 们 能 够 组 合 代表 两 条 简单 圆 形 
路 径 的 变换 一 一 月 球 围 纸 地 球 旋转 的 路 径 和 地 球 围绕 太阳 旋转 的 路 径 
一 一 我 们 就 能 避免 直接 计算 月 球 的 轨迹 。 






































图 4.11 行星 系统 动画 (太阳 和 地 球 的 纹理 来 自 [H1T16]， 月 球 纹理 来 自 改 A16]) 
































事实 证 明 ， 我 们 可 以 使 用 年 阵 堆栈 轻松 地 完成 此 操作 。 顾 名 思 义 ， 
矩阵 堆栈 是 一 堆 变 换 窍 阵 。 正 如 我 们 将 看 到 的 ， 和 矩阵 堆栈 使 得 创建 和 管 
理 复 杂 的 分 层 对 象 和 场景 变 得 容易 ， 它 使 得 变换 可 以 构建 在 其 他 变换 之 
上 《或 者 从 其 他 变换 中 被 移 除 ) 。 











OpenGL 有 一 个 内 置 的 矩阵 堆栈 ， 但 作为 旧 的 固定 功能 “〈“ 非 可 纺 
程 ) 管线 的 一 部 分 ， 它 早已 被 弃 用 [09。 但 是 ，C++ 标 准 模板 库 


(STL) 有 一 个 名 为 “stack" 的 类 ， 通 过 使 用 它 构建 mat4 的 堆栈 ， 它 可 以 
相对 简单 直接 地 当 作 和 矩阵 堆栈 使 用 。 正 如 我 们 将 看 到 的 ， 复 杂 场 景 中 通 
党 需要 的 许多 模型 、 视 图 和 模型 -视图 矩阵 可 以 由 单个 stack<glm::mat4> 
KIER. 





我 们 将 首先 检查 实例 化 和 使 用 C++ 堆 栈 的 基本 命令 ， 然 后 使 用 一 个 
堆栈 来 构建 复杂 的 动画 场景 。 我 们 将 通过 以 下 方法 使 用 C++ 堆栈 类 。 


push(): 在 堆栈 顶部 创建 一 个 新 的 条 目 。 我 们 通常 会 把 目前 在 堆栈 
顶部 的 矩阵 复制 一 份 ， 并 和 其 他 的 变换 结合 ， 然 后 再 利用 这 个 命令 
把 新 的 矩阵 副本 推 入 堆栈 中 。 

pop(): 移 除 〈 并 返回 ) 最 顶部 的 矩阵 。 

top): 在 不 移 除 的 情况 下 ， 返 回 推 栈 最 顶部 矩阵 的 引用 。 
<stack>.top() *= rotate〈 构 建 旋转 矩阵 的 参数 ) 。 

<stack>.top() *= scale〈 构 建 缩放 矩阵 的 参数 ) 。 ---- 直接 对 
堆栈 顶部 的 矩阵 应 用 变换 。 

<stack>.top() *= translate (构建 平移 矩阵 的 参数 ) 。 ~--- Ë 
接 对 堆栈 项 部 的 矩阵 应 用 变换 。 


如 前 面 列表 中 所 示 ,，“*=” 运 算 符 在 mat4 中 说 重 载 ， 因 此 它 可 以 用 于 
连接 和 矩阵。 因此， 我 们 通常 将 它 用 于 癌 算 阵 堆 栈 顶 部 的 矩阵 湛 加 平移 、 
旋转 等 ， 正 如 我 们 展示 出 来 的 这 些 形式 。 





现在 ， 我 们 不 再 通过 创建 mat4 的 实例 来 构建 变换 ， 而 是 使 用 push() 
命令 在 堆栈 顶部 创建 新 的 矩阵。 然后 再 根据 需要 将 期 望 的 变换 应 用 于 堆 
栈 顶 部 的 新 创建 的 矩阵 。 








FEA HER IIBE — AAE PEE se RERE E EH HE pee 52 AR DL 
RRE Te VR A LA BE; HE, EAD TERRE KY Hak AE 
Ro REGARD AT DAL eM A, tH A 2 HEHE RE 





FERRI 1T BASS BE, DP REE Ey KIE Rg ee AB) 
MV#EM. FEE 2 ERER ETRE HUM VIEME, FERPA MV AEB A Bl 
ASA vt FS PE HR MH, HER AMV ie 
阵 是 通过 将 行星 的 变换 结合 到 太阳 的 变换 中 而 建立 的 。 同 样 ， 月 球 的 
MV 窍 阵 位 于 行星 的 MV 窍 阵 之 上 ， 并 通过 将 月 球 的 模型 算 阵 变换 应 用 
于 紧邻 其 下 方 的 行星 的 MV 窍 阵 来 构建 。 





在 浑 染 月 球 之 后 ， 可 以 通过 从 堆栈 中 “弹出 ”第 一 个 月 球 的 矩阵 《将 
堆栈 的 顶部 恢复 到 行星 的 模型 -视图 矩阵 ) ， 然 后 重复 第 二 个 月 球 的 过 
程 ， 来 泻 染 第 二 个 “月 球 ”。 


基本 方法 如 下 。 
(1) 我 们 声明 我 们 的 堆栈 ， 给 它 起 名 为 “mvStack”。 


(2) 当 相 对 于 父 对 象 创 建新 对 象 时 ， 调 
Fd “mvStack.push(mvStack.top())” 


C3) 应 用 新 对 象 所 需 的 变换 ， 也 就 是 将 所 需 的 变换 乘 以 它 。 





(4) 完成 对 象 或 子 对 象 的 绘制 后 ， 调 用 “mvStack.pop02 从 矩阵 堆 
栈 顶 部 移 除 其 模型 -视图 矩阵 。 


在 后 面 的 章节 中 ， 我 们 将 学 习 如 何 创建 球体 并 使 它们 看 起 来 像 行星 
和 卫星 。 就 目前 而 言 ， 为 了 简单 起 见 ， 我 们 将 使 用 我 们 的 金字 塔 和 几 个 
立方 体 构建 一 个 “行星 系统 ”。 





表 4.1 概 述 了 使 用 矩阵 堆栈 的 display0O 函 数 通常 是 什么 结构 。 























表 4.1 使 用 矩阵 堆栈 的 display0 函 数 的 结构 














。 实例 化 矩阵 堆栈 


。 将 新 矩阵 推 入 堆栈 (这 将 实例 化 一 个 空 的 视图 矩阵 ) 
。 将 变换 应 用 于 堆栈 顶部 的 视图 矩阵 


。 将 新 和 矩阵 推 入 堆栈 (这 将 是 父 MV 和 矩阵 一 一 对 第 一 个 父 对 象 来 说 ， 它 直接 
复制 一 份 视图 矩阵 ) 

。 应 用 变换 ， 将 父 对 象 的 模型 矩阵 和 复制 的 视图 窍 阵 结合 

。 发 送 最 顶层 的 矩阵 《〈 即 对 顶点 着 色 器 中 的 MV 和 矩阵 统一 变量 使 
FA"glm::value_ptr()" ) 

。 绘制 父 对 象 



























































u 入 堆栈 。 这 将 是 子 对 象 的 MV 和 窍 阵 ， 最 初 直接 复制 一 份 父 对 象 
MV 和 起 

。 应 用 变换 ， 将 子 对 象 的 模型 矩阵 和 复制 的 父 MV 和 矩阵 结合 
。 发 送 最 顶层 的 矩阵 《〈 即 对 顶点 着 色 器 中 的 MV 珑 阵 统一 变量 使 用 "glm:: 
value_ptr()") 

。 绘制 子 对 象 

















。 将 子 对 象 的 MV 算 阵 弹出 
。 将 父 对 象 的 MV 和 拢 阵 弹唱 
。 将 视图 矩阵 弹出 堆栈 



















































































HES, ET CRI 绕 自 己 的 轴 旋 转 是 在 它 自己 的 局 部 坐标 
TEP, ASMP RY ORG BAAS) 。 因 此 , “太阳 ”的 旋转 
《如 图 4.12 所 示 ) 被 推 到 堆栈 上 ， 但 是 在 绘制 “太阳 ?之 后 ， 它 必须 从 堆 
栈 中 移 除 〈 弹 出 ) 。 








图 4.12 金字塔 (“太阳 ”) 的 旋转 














大 立方 体 (行星 ) 围 经 太阳 的 旋转 《如 图 4.13〈 左 ) 所 示 ) 将 影响 
月 球 的 运动 ， 因 此 它 被 推 到 堆栈 上 并 在 绘制 月 球 时 保持 在 那里 。 相 比 之 
下 ， 行 星 在 其 轴 上 的 旋转 (如 图 4.13( 右 ) 所 示 ) 是 局 部 的 ， 不 会 影响 
月 亮 ， 因 此 在 绘制 月 球 之 前 它 需 要 被 从 堆栈 中 弹出 。 






































图 4.13 大 立方 体 ( 行 星 ) 围绕 太阳 的 旋转 〈 左 ) 和 行星 在 其 轴 上 的 旋转 《〈 右 ) 




















类 似 地 ， 我 们 会 将 变换 推 入 堆栈 以 进行 月 球 的 旋转 (围绕 行星 及 其 
tH) ， 如 图 4.14 所 示 。 


























图 4.14 ”月球 的 旋转 (围绕 行星 及 其 轴 》 


























以 下 是 “行星 ”的 步骤 顺序 。 


pushO0 将 是 行星 MV 和 矩阵 中 也 会 影响 子 对 象 的 部 分 。 
translate(...) 将 太阳 周围 的 行星 运动 结合 到 行星 的 MV 和 矩阵 中 。 在 这 
个 例子 中 ， 我 们 使 用 三 角 运 算 来 计算 行星 运动 的 平移 。 
pushO 将 是 行星 的 完整 MV 和 矩阵 ， 也 包括 它 的 轴 旋 转 。 
rotate(...) 结 合 行星 的 轴 旋 转 〈 稍 后 会 弹出 ， 不 会 影响 子 对 象 ) 。 
glm::value_ptr(mvStack.top()) 获 取 MV 窍 阵 ， 然 后 将 其 肥 送 到 MV 统 
绘制 星球 。 

pop0 将 行星 MV 和 窍 阵 从 堆栈 中 移 除 ， 雄 露出 它 下 面 行星 MV 和 窍 阵 的 
不 包括 行星 轴 旋 转 的 早期 副本 (因此 只 有 行星 的 平移 会 影响 月 


亮 ) 。 





现在 我 们 可 以 编写 完整 的 display0 函 数 ， 如 程序 4.4 所 示 。 


程序 4.4 ”使 用 和 矩阵 堆栈 的 简单 太阳 系 

















stack<glm: :mat4> mvStack; 
void display(GLFWwindow* window, double currentTime) { 





























// 配置 背景 、 深 度 绥 冲 区 、 泻 染 程 序 ， 以 及 和 原来 一 样 的 投影 矩阵 








// 将 视图 矩阵 推 入 堆栈 

vMat = glm::translate(glm::mat4(1.0f), glm::vec3(-cameraX, -cameraY, -c 
ameraZ)); 

mvStack.push(vMat); 











mvStack.push(mvStack.top()); 

mvStack.top() *= glm::translate(glm::mat4(1.6f), glm::vec3(0.0f, ©0.0f, 
6.6f)); // 太阳 位 置 

mvStack.push(mvStack.top()); 

mvStack.top() *= glm::rotate(glm: :mat4(1.6f), (float)currentTime, glm:: 
vec3(1.0f, 0.0f, 08.6f)); 





// 太阳 旋转 
glUniformMatrix4fv(mvLoc, 1, GL_FALSE, glm::value_ptr(mvStack.top())); 
glBindBuffer(GL_ARRAY_ BUFFER, vbo[1]); 
glVertexAttribPointer(@, 3, GL_FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray(@) ; 
glEnable(GL_DEPTH_TEST); 
glEnable(GL_LEQUAL); 
glDrawArrays(GL_TRIANGLES, ©, 18); // 绘制 太阳 
mvStack.pop(); // 从 堆栈 中 移 除 太阳 的 轴 旋 转 



































mvStack.push(mvStack.top()); 
mvStack.top() *= 
glm::translate(glm: :mat4(1.0f), glm::vec3(sin((float)currentTime)*4. 
@, 68.6f, cos((float) 
currentTime)*4.0)); 

mvStack.push(mvStack.top()); 

mvStack.top() *= glm::rotate(glm::mat4(1.0f), (float)currentTime, glm:: 
vec3(@.0, 1.0, @.0)); 

















// 行星 旋转 
glUniformMatrix4fv(mvLoc, 1, GL_FALSE, glm::value_ptr(mvStack.top())); 
glBindBuffer(GL_ARRAY_ BUFFER, vbo[®@]); 
glVertexAttribPointer(@, 3, GL_FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray(@) ; 
glDrawArrays(GL_TRIANGLES, @, 36); // 绘制 行星 





























mvStack.pop() ; // 从 堆栈 中 移 除 行星 的 轴 旋 转 











je A See ee ee 
mvStack.push(mvStack.top()); 
mvStack.top() *= 
glm::translate(glm: :mat4(1.0f), glm::vec3(0.0f, sin((float)currentTim 
e)*2.0, 
cos((float)cu 
rrentTime)*2.0)); 
mvStack.top() *= glm::rotate(glm::mat4(1.0f), (float)currentTime, glm:: 


vec3(@.0, 0.0, 1.0)); 
// 月 球 旋 转 


mvStack.top() *= glm::scale(glm::mat4(1.6f)，8glm::vec3(6.25f，6.25f，6. 
25f)); // 让 月 球 小 一 些 

glUniformMatrix4fv(mvLoc, 1, GL_FALSE, glm::value_ptr(mvStack.top())); 

glBindBuffer(GL_ARRAY_ BUFFER, vbo[®@]); 

glVertexAttribPointer(@, 3, GL_FLOAT, GL_FALSE, ©, @); 

glEnableVertexAttribArray(@) ; 

glDrawArrays(GL_TRIANGLES, ©, 36); // 绘制 月 球 






































// 从 堆栈 中 移 除 月 球 缩放 、 旋 转 、 位 置 矩 阵 ， 行 星 位 置 矩 阵 ， 太 阳 位 置 矩 阵 ， 和 视图 矩 





S] 





























阵 





mvStack.pop(); mvStack.pop(); mvStack.pop(); mvStack.pop(); 





算 阵 堆栈 操作 已 突出 显示 。 有 几 个 值得 注意 的 细节 : 


。 我 们 在 模型 矩阵 中 引入 了 缩放 操作 。 我 们 希望 月 球 比 行星 更 小 ， 所 
URIE KH ERA EMV ERE H Y scale. 

。 在 这 个 例子 中 ， 我 们 使 用 三 角 运 算 sin() 和 cos() 来 计算 行星 绕 太 阳 的 
旋转 〈 作 为 平移 的 方式 ) ， 以 及 月 球 绕 行星 的 旋转 。 

。 两 个 绥 冲 区 #0 和 #1 分 别 包 含 立 方 体 和 金字 塔 的 顶点 。 

。 注意 在 glUniformMatrixO 命 令 中 调用 的 
gm::value_ptrtmnvMatrix.topO) 函 数 。 这 个 调用 获取 了 堆栈 顶部 矩阵 
中 的 值 ， 然 后 将 这 些 值 发 送 到 统一 变量 (在 本 例 中 为 太阳 、 行 星 以 
及 月 球 的 MV 和 窍 阵 ) 。 


此 处 省 略 顶 点 和 片段 着 色 器 代码 _ 它们 与 前 一 个 示例 相同 。 我 们 
还 移动 了 金字 塔 (“太阳 ”) 和 摄像 机 的 初始 位 置 ， 以 使 场景 在 屏幕 上 居 
中 。 





AQ ”应 对 “Z 冲 突 ” 伪 影 


回想 一 下 ， 在 演 染 多 个 对 象 时 ，OpenGL 使 用 Z 绥 冲 区 算法 CZ- 
buffer algorithm) 〈 如 图 2.14 所 示 ) 来 进行 隐藏 面 消 除 。 通 党 情况 下 ， 
通过 选择 最 接近 相机 的 相应 户 段 的 颜色 作为 像素 的 颜色 ， 这 种 方法 解决 
了 哪些 物体 的 曲面 可 见 并 呈现 到 屏幕 ， 而 哪些 曲面 位 于 其 他 物体 后 面 因 
此 不 应 该 被 泻 染 。 





然而 ， 有 时 候 场 景 中 的 两 个 物体 表面 重 登 并 位 于 重合 的 平面 中 ， 这 
使 得 Z 绥 冲 区 算法 难以 确定 应 该 泻 染 两 个 表面 中 的 哪 一 个 〈 因 为 两 者 都 
不 “最 接近 ”摄像 机 ) 。 发 生 这 种 情况 时 ， 浮 点 舍 入 误差 可 能 会 导致 演 染 
表面 的 某 些 部 分 使 用 其 中 一 个 对 象 的 颜色 ， 而 其 他 部 分 则 使 用 另 一 个 对 
象 的 颜色 。 这 种 不 自然 的 伪 影 被 称 为 Z 冲 突 (Z-fighting〉 或 深度 冲突 
CDepth-fighting) ， 因 为 这 种 效果 是 演 染 的 片段 在 Z 缓 冲 区 中 相互 对 应 
的 像素 条 目 上 “冲突 斗争 ”的 结果 。 图 4.15〈 见 彩 插 ) 显示 了 两 个 具有 重 
BES UD 面 的 盒子 之 间 的 Z 冲 突 示 例 。 














图 4.15 ” Z 冲 突 示例 


创建 地 形 或 阴影 时 经 常会 出 现 这 种 情况 。 在 这 种 情况 下 ， 有 时 Z 神 
突 是 可 以 预知 的 ， 并 且 校 正 它 的 常用 方法 是 稍微 移动 一 个 物体 ， 使 得 表 
面 不 再 是 共 面 的 。 我 们 将 在 第 8 章 中 看 到 这 样 的 例子 。 














Z 神 突 还 可 能 是 由 于 深度 缓冲 天 中 的 值 的 精度 有 限 。 对 于 由 Z 缓 剖 
器 算法 处 理 的 每 个 像素 ， 其 深度 信息 的 精度 受 深度 缓冲 髓 中 可 存储 的 位 
数 限 制 。 用 于 构建 透视 窍 阵 的 近 勇 裁 平 面 和 远 胡 裁 平面 之 间 的 范围 越 
大 ， 具 有 相似 《但 不 相等 ) 的 实际 深度 的 两 个 对 象 的 点 在 深度 缓冲 区 中 
的 数值 表示 越 可 能 相同 。 因 此 ， 程 序 员 可 以 选择 适当 的 近 、 远 勇 裁 平面 
值 来 最 小 化 两 个 平面 之 间 的 距离 ， 同 时 仍然 确保 场景 必需 的 所 有 对 象 都 
位 于 视 锥 内 。 














同样 重要 的 是 要 理解 ， 由 于 透视 变换 的 影响 ， 改 变 近 一 惟 平面 值 可 
能 比 对 远 檀 裁 平面 进行 等 效 变 化 对 于 Z 冲 突 伪 影 具 有 更 大 的 影响 。 因 
UE, ENIE Sa ae EA Se HR Bs A BY R F TA o 








本 书 前 面 的 例子 只 是 简单 地 使 用 了 0.1 和 1000 的 值 〈 在 我 们 对 
perspectiveO) 的 调用 中 ) 用 于 近 
针对 您 的 场景 


剪裁 平面 和 远 剪裁 平面 。 这 些 可 能 
行 调整 。 
410 ”图 元 的 其 他 选项 


OpenGL 支 持 许多 图 元 类 型 一 一 到 目前 为 止 我 们 已 经 看 到 了 两 个 
GL_TRIANGLES 和 GL_POINTS。 事 实 上 ， 还 有 好 几 个 其 他 的 选择 。 
别 。 以 下 是 


M: 
还 | 
OpenGL 支 持 的 所 有 可 用 图 元 类 型 都 属于 三 角形 、 线 、 点 或 者 补丁 的 类 
一 个 完整 的 清单 。 


三 角形 图 元 : 


GL_TRIANGLES 


AAA 





本 书 中 常见 的 图 元 类 型 。 
数据 组 成 一 个 三 角形 : 


管线 中 传递 的 每 3 个 顶点 
Ea 
or _TRIANCLE_STRIP 








成 一 
顶点 





线 个 台 的 第 一 个 顶点 组 
形 


3 4 等 





三 角形 ; A oa ell 
仅 用 于 几何 着 色 器 
GL_TRIANGLES ADJACENCY 的 顶点 ， 


。 人 允许 着 色 器 访问 当前 三 角形 
以 及 额外 的 相 邻 顶 点 
仅 用 于 几何 着 色 器 。 类 似 
GL_TRIANGLE_STRIP_ADJACENCY |GL_TRIANGLES_ADJACENCY， 除 了 三 角形 











点 像 GL_TRIANGLE_STRIP 4'—# 5 AHS 


线 图 元 : 





FP 传 递 的 每 两 个 顶点 组 成 一 条 线 : 

















GL_LINE_STRIP 


0@ 1 2 ©; 


[2 
: SF 
跟 GL_LINE_STRIP 一 样 ， 除 了 第 一 个 顶点 和 最 
GL_LINE_LOOP = rae 、 4 y3 


仅 用 于 几何 着 色 器 。 人 允许 着 色 器 访问 当前 线 的 
GL_LINES_ADJACENCY 顶点 ， 以 及 额外 的 相 邻 顶点 


类 似 GL_LINES_ADJACENCY， 除 了 线 顶 点 像 
FR = S » AT 
GL_LINE_STRIP_ADJACENCY GL_LINE_STRISTRIP 中 一 样 互相 重 竹 


点 图 元 : 
































GL_POINTS 


补丁 图 元 : 











仅 用 于 细 分 着 色 器 。 指 示 一 组 顶点 从 顶点 着 色 器 传递 到 细 分 探 人 












































器 ， 在 这 里 它们 通常 用 于 将 曲面 细 分 网 格 成 形 为 曲面 


























4.11 性 能 优先 的 编程 方法 


随 着 3D 场 景 的 复杂 性 增加 ， 我 们 将 越 来 越 关 注 性 能 。 我 们 已 经 看 
到 一 些 例子 ， 我 们 为 了 速度 做 出 一 些 编程 决策 一 一 例如 当 我 们 使 用 实例 


MOI, DA Be SATS m or FY RR BS BY 
实际 上 ， 我 们 展示 的 代码 已 经 包含 了 一 些 我 们 尚未 讨论 的 其 他 优 
化 。 我 们 现在 来 探索 这 些 和 其 他 重要 技术 。 


4.11.1 尽量 减少 动态 内 存 空 间 分 配 


考虑 到 性 能 ， 我 们 的 C++ 代码 的 最 关键 部 分 显然 是 displayO 函 数 。 
这 是 在 任何 动画 或 实时 泻 染 过 程 中 重复 调用 的 函数 ， 因 此 在 此 函数 中 
《或 在 它 调用 的 任何 函数 中 ) 我 们 必须 努力 实现 最 高 的 效率 。 








将 displayO 函 数 的 开销 保持 在 最 低 限度 的 一 个 重要 方法 是 避免 任何 
要 内 存 分 配 的 步骤 。 因 此， 明显 要 避免 的 事情 的 例子 包括 : 








。 实 例 化 对 象 
。 声 明 变量 . 





如 果 读 者 回顾 我 们 迄今 为 止 开发 的 程序 ， 可 以 观察 到 ， 我 们 实际 上 
E BUC HI A Fs HY display() K BcP 15 FA BREA 

， 并 分 配 了 它 的 空间 。 声 明 或 实例 化 几乎 从 不 出 现在 displayO 函 数 
ie 



































// 分 配 在 display() 函 数 中 使 用 的 变量 空间 ， 这 样 它们 就 不 必 在 演 染 过 程 中 分 配 


GLuint mvLoc, projLloc; 











int width, height; 
float aspect; 
glm: :mat4 pMat, vMat, mMat, mvMat; 





请 注意 ， 我 们 故意 在 代码 块 的 顶部 放 了 一 个 注释 ， 说 明 这 些 变量 是 


预先 分 配 的 ， 以 便 稍 后 在 displayO 函 数 中 使 用 《尽管 我 们 到 现在 才 明确 
地 指出 这 一 点 ) 。 


在 我 们 的 矩阵 堆栈 示例 中 发 生 了 一 个 未 预先 分 配 的 变量 的 情况 。 使 
用 C++ 堆栈 类 ， 每 次 “ 推 ? 操 作 都 会 导致 动态 内 存 分 配 。 有 趣 的 是 ， 在 
Java 中 ，JOML 库 提供 了 一 个 与 OpenGL 一 起 使 用 的 MatrixStack 类 ， 它 允 
许 为 矩阵 堆栈 预先 分 配 空 间 ! 我 们 在 本 书 的 Java 版 中 使 用 它 。 





还 有 其 他 更 微妙 的 例子 。 例 如 ， 将 数据 从 一 种 类 型 转换 为 妨 一 种 类 
型 的 函数 调用 在 某 些 情况 下 可 能 会 实例 化 并 返回 新 转换 的 数据 。 因 此 ， 
理解 从 displayO 调 用 的 任何 库 函 数 的 行为 非常 重要 。 数 学 库 GLM 并 没有 
专门 针对 速度 优化 设计 。 这 导致 一 些 操作 可 能 引起 动态 内 存 分 配 。 如 果 
可 能 的 话 ， 我 们 会 尽量 使 用 直接 在 已 经 分 配 了 空间 的 变量 上 操作 的 
GLM 函 数 。 我 们 鼓励 读者 在 性 能 至 关 重 要 时 探索 蔡 代 方法 。 














4.11.2 ”预先 计算 透视 矩阵 


可 以 减少 display0 函 数 开销 的 为 一 个 优化 古 将 透视 算 阵 的 计算 移动 
到 initO 函 数 中 。 我 们 在 4.5 贡 中 提 到 了 这 种 可 能 性 《在 脚注 中 ) o BA 
这 很 容易 做 到 ， 但 可 能 会 有 一 点 轻微 的 复杂 情况 。 虽 然 通 利 并 不 需要 重 
新 计算 透视 和 矩阵， 但 是 如 果 运 行 应 用 程序 的 用 户 调整 窗口 大 小 例如 通 
过 拖 动 窗口 角 大 小 调整 手柄 ) ， 则 重新 计算 就 是 必要 的 。 








幸运 的 是 ，GLFW 可 以 配置 在 调整 窗口 大 小 时 自动 回调 指定 的 函 
数 。 在 调用 init0 之 前 ， 我 们 将 以 下 内 容 添 加 到 main(): 


glfwSetWindowSizeCallback(window, window_reshape_callback) ; 


第 一 个 参数 是 GLFW 窗 口 ， 第 二 个 参数 是 GLFW 在 调整 窗口 大 小 时 
调用 的 函数 的 名 称 。 然 后 ， 我 们 将 计算 透视 矩阵 的 代码 移动 到 init() 中 ， 
同时 将 其 复制 到 名 为 window_reshape_callback() 的 新 函数 中 。 


在 程序 4.1 的 例子 中 ， 如 果 我 们 重新 组 织 代码 ， 从 displayO 中 删除 透 
视 和 矩阵 的 计算 ， 那 么 main0、init0、displayO0 和 新 函数 
window_reshape_callback() 修 改 后 的 版 本 将 如 下 所 示 。 





void init(GLFWwindow* window) { 











// 和 之 前 版 本 一 样 ， 再 加 上 以 下 三 行 代码 : 

glfwGetFramebufferSize(window, &width, &height) ; 

aspect = (float)width / (float)height; 

pMat = glm::perspective(1.0472f, aspect, @.1f, 1000.0f); // 1.0472 
radians = 66 degrees 


} 








void display(GLFWwindow* window, double currentTime) { 














// 和 之 前 版 本 一 样 ， 再 移 除 以 下 几 行 代码 ; 











— // 函数 余下 部 分 没有 变化 
} 





void window reshape callback(GLFWwindow* window, int newWidth, int newHeig 
ht) { 

aspect = (float)newWidth / (float)newHeight; // 回调 提供 的 新 的 宽度 、 高 
度 

glViewport(@, ©, newWidth, newHeight) ; // 设置 和 帧 缓冲 区 相关 的 屏 
幕 区 域 

pMat = glm::perspective(1.0472f, aspect, 98.1f, 1000.0f); 
} 








int main(void) { 








// 和 之 前 版 本 一 样 ， 再 加 上 以 下 调用 : 


glfwSetWindowSizeCallback(window, window reshape callback); 
init(window) 
while (!glfwwindowShouldClose(window)) { 
// 余下 和 以 前 一 样 
} 





本 书 配套 资源 中 的 程序 ， 与 透视 矩阵 计算 有 关 的 实现 都 是 以 这 种 方 
式 组 织 的 ， 从 程序 4.1 的 颜色 插值 版 本 开始 。 


4.113 ”背面 剔除 


提高 泻 染 效率 的 男 一 种 方法 是 利用 OpenGL 的 背面 别 除 能 力 。 当 3D 

ek 忆 合 ”时 ， 意 味 着 内 部 永远 不 可 见 〈 例 如 对 于 立方 体 和 人 金字 

么 外 表面 的 那些 与 观察 者 背离 呈 一 定 角度 的 部 分 将 始终 被 同一 

eon sean HS. tht, AGES WLS = ATE AT EB 

到 《无 论 如 何 它 们 都 会 在 隐藏 面 消除 的 过 程 中 被 履 产 ) ， 因 此 没有 理由 
光栅 化 或 泻 染 它们 。 








我 们 可 以 使 用 命令 glEnable(GL_CULL_FACE) 要 求 OpenGL 识 别 
并 “剔除 ”( 不 泻 染 ) 背 向 的 三 角形 。 我 们 还 可 以 使 用 
glDisable(GL_CULL_FACE)#4H1 Hii aI BR. ANEI PDI RE 
MAY, Eon Ra 75 2 OpenGLyI RASA, DAFOE. 


启用 背面 剔除 时 ， 默 认 情 况 下 ， 只 有 三 角形 朝 前 时 才 会 被 泻 染 。 此 
外 ， 默 认 情 况 下 ， 如 果 三 角形 的 3 个 顶点 从 OpenGL 摄 像 机 中 查看 是 以 首 
时 针 顺 序 排列 的 (基于 它们 在 缓冲 区 中 定义 的 顺序 ) ， 则 三 角形 被 视 为 
面向 前 方 。 顶 点 沿 顺 时 和 针 方 向 排列 的 三 角形 (从 OpenGL 摄 像 机 中 看 ) 
是 朝 后 的 ， 不 会 被 演 染 。 这 种 逆 时 针 方 向 定义 的 “前 向 * 有 时 被 称 为 缠绕 
顺序 ， 可 以 使 用 函数 调用 glFrontFace(GL_CCW) 显 式 设置 逆 时 针 ( 默 
认 ) WIEM, #kglFrontFace (GL_CW) 设 置 顺 时 针 为 正 同 。 类 似 地 ， 也 可 
以 显 式 设置 是 否 演 染 正 向 或 背 同 的 三 角形 。 实 际 上 ， 为 了 这 个 目的 ， 我 
们 指定 哪些 不 被 泻 染 一 一 即 哪些 被 “剔除 ”。 我 们 可 以 通过 调用 
中 CullFace(GL_BACK) 指 定 面 癌 背面 的 三 角形 被 剔除 〈 尽 管 这 是 不 必要 
的 ， 因 为 它 是 默认 的 ) 。 或 者 ， 我 们 可 以 通过 分 别 用 GL_FRONT 或 
GL_FRONT_AND_BACK 蔡 换 参 数 GL_BACK 来 指定 剔除 前 辐 三 角形 ， 
甚至 别 除 所 有 三 角形 。 








正如 我 们 将 在 第 6 章 中 看 到 的 那样 ，3D 模 型 通 第 被 设计 成 外 表面 由 
相同 缠绕 顺序 的 三 角形 构成 一 一 最 单 见 的 是 逆 时 针 一 一 因此 如 果 启 用 吻 
除 ， 则 默认 情况 下 模型 的 外 部 面 癌 相机 的 表面 部 分 会 被 泻 染 。 因 为 默认 
情况 下 OpenGL 假 定 的 缠绕 顺序 是 逆 时 针 方 铝 ， 如 果 模 型 设计 缠绕 顺序 
为 顺 时 针 方 向 ， 那 么 如 果 局 用 了 背面 剔除 ， 需 要 由 程序 员 调 用 











gl_FrontFace (GL_CW) 来 解决 此 问题 。 





注意 ， 在 GL_TRIANGLE_STRIP 的 情况 下 ， 每 个 三 角形 的 缠绕 顺序 
不 停 地 互 换 。OpenGL 通 过 在 构建 每 个 连续 三 角形 时 “翻转 ”顶点 序列 来 
补偿 这 一 点 ， 如 下 所 示 : 0-1-2， 然 后 2-1-3、2-3-4、4-3-5、4-5-6 等 。 


背面 剔除 通过 确保 OpenGL 不 花 时 间 光 机 化 和 泻 染 从 不 被 看 到 的 表 
面 来 提高 性 能 。 我 们 在 本 章 中 看 到 的 大 多 数 示 例 都 非常 小 ， 以 至 于 没有 
ene (图 4.9 中 展示 了 一 个 例外 ， 其 中 包含 了 100 000 个 多 
边 形 动画 实例 ， 这 可 能 会 对 某 些 系统 造成 性 能 挑战 ) 。 在 实践 中 ， 大 多 
数 3D 模 型 通常 是 “闭合 的 "， 因 此 习惯 上 会 常规 地 启用 背面 剔除 。 例 如 ， 
我 们 可 以 通过 修改 display0 函 数 向 程序 4.3 添 加 背面 剔除 ， 如 下 所 示 。 








void display(GLFWwindow* window, double currentTime) { 


glEnable(GL_CULL_FACE) ; 





// 绘 上 Hl) 7a 


glEnable(GL_DEPTH TEST); 

glDepthFunc(GL_LEQUAL) ; 

glFrontFace(GL_Cw) ; // 立方 体 顶点 的 缠绕 顺序 为 顺 时 针 方 向 
glDrawArrays(GL_TRIANGLES, ©, 36); 





// 绘制 金字 塔 


glEnable(GL DEPTH TEST); 

glDepthFunc(GL_LEQUAL) ; 

glFrontFace(GL_CCW); // 金字 塔 顶点 缠绕 顺序 为 逆 时 针 方 向 
glDrawArrays(GL_TRIANGLES, ©, 18); 
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如 当 应 该 设置 GL_CCW 时 设置 成 了 GL_CW， 可 能 会 导致 泻 染 出 对 象 的 





内 部 而 不 是 其 外 部 ， 这 就 会 产生 类 似 于 不 正确 的 透视 矩阵 的 失真 。 





效率 不 是 进行 背面 殊 除 的 唯一 原因 。 在 后 面 的 章节 中 ， 我 们 将 看 到 
其 他 用 途 ， 例 如 我 们 想 要 碍 看 3D 模 型 内 部 或 使 用 透明 度 时 的 情况 。 


补充 说 明 


在 OpenGL/GLSL 中 ， 有 许多 其 他 功能 和 结构 可 用 于 管理 和 利用 数 
据 ， 我 们 在 本 章 中 仅 涉 及 了 很 浅 层 的 一 部 分 。 例 如 ， 我 们 没有 描述 统一 
块 ， 这 是 一 种 类 似 于 C 中 的 struct 的 用 于 统一 变量 的 机 制 。 甚 至 可 以 设置 
统一 块 从 缓冲 区 接收 数据 。 另 一 个 强大 的 机 制 是 着 色 器 存储 块 ， 它 本 质 

是 一 个 着 色 器 可 以 写 入 的 缓冲 区 。 





关于 管理 数据 的 许多 选项 的 一 个 很 好 的 参考 资料 是 《OpenGL 超 级 
宝典 》[SW13]， 特 别 是 关于 数据 的 章节 (第 7 版 的 第 5 章 ) 。 它 还 描述 了 
我 们 所 涵盖 的 各 种 命令 的 许多 细节 和 选项 。 本 章 的 前 两 个 示例 程序 ， 即 
程序 4.1 和 程序 4.2 受 到 《OpenGL 超 级 宝典 》 中 类 似 示 例 的 启发 。 

















我 们 还 需要 学 习 如 何 管理 其 他 类 型 的 数据 ， 以 了 解 如 何 将 它们 发 送 
给 OpenGL 管 线 。 其 中 之 一 是 纹理 ， 包 含 可 用 于 “绘制 ?场景 中 对 象 的 彩 
色 图 像 数 据 〈 像 上 照片)。 我 们 将 在 第 5 章 中 研究 纹理 图 像 。 我 们 将 进 一 
步 研究 的 另 一 个 重要 缓冲 区 是 深度 缓冲 区 〈 或 者 叫 Z 缓 冲 区 ) 。 当 我 们 
在 第 8 章 中 研究 阴影 时 ， 这 将 变 得 很 重要 。 关 于 如 何在 OpenGL 中 管理 图 
形 数据 ， 我 们 还 有 很 多 知识 需要 学 习 ! 














习题 


41 (UA) 修改 程序 4.1 以 使 用 你 自己 设计 的 其 他 简单 3D 形 状 蔡 
换 立 方 体 。 请 务必 在 glDrawArrays0 命 令 中 正确 指定 顶点 数 。 


4.2 (CIA) 在 程序 4.1 中 ， 在 display0) 函 数 中 “view”* 和 矩阵 被 简单 地 
定义 为 摄像 机 位 置 的 负数 : 


vMat = glm::translate(glm::mat4(1.0f), glm::vec3(-cameraX, -cameraY, -came 





raZ)); 


将 此 代码 蔡 换 为 图 3.13 所 示 的 计算 实现 。 这 将 允许 你 通过 指定 摄像 
机 位 置 和 3 个 朝向 轴 来 定位 摄像 机 。 你 将 发 现 有 必要 存储 3.7 节 中 描述 的 
回 量 C、V、N。 然 后 ， 洽 试 不 同 的 摄像 机 视点 ， 并 观察 泻 染 立 方 体 的 最 
终 外 观 。 


4.3 CUA) 修改 程序 4.4 以 包含 第 二 个 “行星 ”， 使 用 练习 4.1 中 你 
自 定义 的 3D 形 状 。 确 保 你 的 新 “行星 ?处 于 与 现 有 行星 不 同 的 轨道 上 ， 这 
样 它们 就 不 会 发 生 人 碰撞 。 





44 (WH) 修改 程序 4.4， 使 用 “查看 ”函数 构建 “视图 ”类 阵 (如 
第 3.9 节 所 述 ) 。 然 后 尝试 将 “查看 ”参数 设置 到 不 同 的 位 置 ， 例 如 查看 太 
了 昌 【〔 在 这 种 情况 下 场景 应 该 看 起 来 正常 ，， 查 看 行星 或 查看 月 球 。 








AS CFF) 提出 glCullFace(GL_FRONT_AND_BACK) 的 实际 用 
途 。 


MR 小 、 
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[1] 在 这 个 例子 中 ， 我 们 声明 了 两 个 缓冲 区 ， 以 强调 我 们 常常 会 用 到 多 
个 缓冲 区 。 后 面 我 们 会 用 到 额外 的 缓冲 区 来 存储 顶点 相关 的 其 他 信息 ， 
比如 颜色 。 现 在 ， 我 们 只 用 到 了 一 个 声明 的 缓冲 区 ， 所 以 如 果 只 声明 一 
个 VBO 也 是 足够 的 。 


[2] 请 注意 ， 这 里 ， 我 们 第 一 次 避免 描述 一 个 或 多 个 OpenGL 调 用 中 的 
每 一 个 参数 。 如 第 2 草 所 述 ， 我 们 建议 读者 根据 需要 利用 OpenGL 文 档 来 
获取 此 类 详细 信息 。 





[3] 精明 的 读者 可 能 会 注意 到 ， 并 不 需要 每 次 调用 display0O 时 部 构建 透 
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阵 的 计算 从 displayO 移 到 initO 函 数 。 





[4] 通常 ， 这 些 调用 可 以 放 在 initO 而 不 是 display0 中 。 但 是 ， 在 绘制 具 
有 不 同属 性 的 多 个 对 象 时 ， 必 须 将 其 中 一 个 或 多 个 放 在 display0 中 。 为 
简单 起 见 ， 我 们 总 是 将 它们 放 在 displayO 中 。 


[5] 是 的 ， 我 们 知道 月 球 并 不 沿 着 这 种 “垂直 ”轨道 绕 地 球 旋转 ， 而 是 围 


绕 地 球 绕 太 阳 旋 转 的 共 面 。 我 们 选择 这 个 轨道 使 我 们 的 程序 执行 更 容易 
理解 。 





第 5 章 ”纹理 贴图 


纹理 贴图 是 在 光栅 化 的 模型 表面 上 履 盖 图 像 的 技术 。 它 是 为 泻 染 场 
景 添加 真实 感 的 最 基本 和 最 重要 的 方法 之 一 。 








纹理 贴图 非常 重要 ， 因 此 硬件 也 为 它 提供 了 支持 ， 使 得 它 具 备 了 实 
现实 时 的 照片 级 真实 感 的 超 高 性 能 。 纹 理 单元 是 专 为 纹理 设计 的 硬件 组 
件 ， 现 代 显 卡通 币 带 有 数 个 纹理 单元 。 


5.1 加 载 纹理 图 像 文件 


为 了 在 OpenGL/GLSL 中 有 效 地 完成 纹理 贴图 ， 需 要 协调 好 以 下 几 
个 不 同 的 数据 集 和 机 制 |: 


用 于 保存 纹理 图 像 的 纹理 对 象 〈 在 本 章 中 我 们 仅 考虑 2D 图 像 ) ; 
一 个 特殊 的 统一 采样 右 变 量 ， 以 便 顶点 着 色 右 可 以 访问 纹理 ; 
用 于 保存 纹理 坐标 的 缓冲 区 ; 

用 于 将 纹理 坐标 传递 给 管线 的 顶点 属性 ; 

显卡 上 的 纹理 单元 。 


纹理 图 像 可 以 是 任何 图 像 。 它 可 以 是 人 造 的 或 者 自然 产生 的 事物 的 
图 片 ， 例 如 布 、 草 或 行星 表面 ， 它 也 可 以 是 几何 图 样 ， 例 如 图 5.1 中 的 
棋盘 图 样 。 在 电子 游戏 和 动画 电影 中 ， 纹 理 图 像 通常 用 于 给 角色 绘制 面 
部 和 衣服 ， 或 者 在 像 图 5.1 中 的 海豚 等 生物 旱 上 绘制 皮肤 。 





























图 5.1 使 用 两 张 不 同 的 图 像 给 同一 个 海豚 模型 添加 纹理 [TU16] 








图 像 通常 存储 在 图 像 文 件 中 ， 例 如 .jpg、.png、.gif 或 .tiff 格 式 。 为 了 
使 纹理 图 像 可 以 被 用 于 OpenGL 管 线 中 的 着 色 器 ， 我 们 需要 从 图 像 中 提 
取 颜 色 并 将 它们 放 入 OpenGL 纹 理 对 象 〈 用 于 保存 纹理 图 像 的 内 置 
OpenGL 结 构 ) 中 。 


许多 C++ 库 可 用 于 读 取 和 处 理 图 像 文件 ， 常 见 的 选择 包括 Cimg、 
BoostGIL 和 Magick++。 我 们 选择 使 用 专 为 OpenGL 设 计 的 名 为 SOIL2 
[S017] 的 库 ， 它 基于 曾经 非常 流行 但 现在 已 经 过 时 的 库 SOIL。 在 附录 人 A 和 
附录 B 中 介绍 了 SOIL2 的 安装 步 又 。 








通 营 我 们 将 纹理 加 载 到 OpenGL 应 用 程序 的 步骤 是 : (a) 使 用 
SOIL2 实 例 化 OpenGL 纹 理 对 象 并 从 图 像 文 件 中 读 入 数据 ; (b) 调用 
glBindTexture() 以 使 新 创建 的 纹理 对 象 处 于 激活 状态 ; Cc) 使 用 


glTexParameter0O 函 数 调整 纹理 设置 。 得 的 结果 就 是 现在 可 用 的 
OpenGL 纹 理 对 象 的 整 型 ID 。 











创建 一 个 纹理 对 象 ， 首 先 需要 声明 一 个 GLuint 类 型 的 变量 。 正 如 我 
们 所 看 到 的 ， 这 是 一 个 用 于 保存 OpenGL 对 象 的 整 型 ID 引 用 的 OpenGL 类 
型 。 接 下 来 ， 我 们 调用 SOIL_load_OGL _texture() 来 实际 生成 纹理 对 象 。 
SOIL_load_OGL saan oe 数 接受 图 像 文件 名 作为 其 参数 之 一 〈 稍 后 将 
描述 一 些 其 他 参数 ) 。 这 些 步 又 在 以 下 函数 中 实现 : 


GLuint loadTexture(const char *texImagePath) { 
GLuint textureID; 
textureID = SOIL_load_OGL_texture(texImagePath, 
SOIL LOAD AUTO, SOIL CREATE NEW ID, SOIL FLAG INVERT Y); 


if (textureID == @) cout << "could not find texture file" << texImagePat 
h << endl; 
return textureID; 


} 





我 们 会 经 常 使 用 这 个 函数 ， 所 以 我 们 将 它 添加 到 Utils.cpp 实 用 工具 
类 中 。 这 样 ， 我 们 的 C++ 应 用 程序 就 只 需 调 用 上 述 的 loadTexture() 函 数 
来 创建 OpenGL 纹 理 对 象 ， 如 下 所 示 。 








GLuint myTexture = Utils::loadTexture("image. jpg") ; 


其 中 image.jpg 是 纹理 图 像 文 件 ，myTexture 是 生成 的 OpenGL 纹 理 对 
象 的 整 型 ID。 这 里 文 持 多 种 图 像 文件 类 型 ， 包 括 前 面 列 出 的 所 有 图 像 文 
件 类 型 。 


5.2 ”纹理 坐标 


现在 我 们 已 经 有 了 将 纹理 图 像 加 载 到 OpenGL 中 的 方法 ， 我 们 需要 
指定 我 们 希望 如 何 将 纹理 应 用 于 对 象 的 泻 染 表面 。 我 们 通过 为 模型 中 的 
每 个 顶点 指定 纹理 坐标 来 完成 此 操作 。 


纹理 坐标 是 对 纹理 图 像 (通常 是 2D)〉 中 的 像素 的 引用 。 纹 理 图 像 
中 的 像素 被 称 为 纹 素 (Texel) ， 以 便 将 它们 与 在 屏幕 上 呈现 的 像素 区 
分 开 。 纹 理 坐 标 用 于 将 3D 模 型 上 的 点 映射 到 纹理 中 的 位 置 。 除 了 将 它 
定位 在 3D 空 间 中 的 (x,y,z) 华 标 之 外 ， 模 型 表面 上 的 每 个 点 还 具有 纹理 华 
标 (s,t)， 用 来 指定 纹理 图 像 中 的 哪个 纹 素 为 它 提供 颜色 。 这 样 ， 物 体 的 
表面 被 按照 纹理 图 像 * 涂 画 ”。 纹 理 在 对 象 表面 上 的 朝向 由 分 配给 对 象 顶 
点 的 纹理 坐标 来 确定 。 

















要 使 用 纹理 贴图 ， 必 须 为 要 添加 纹理 的 对 象 中 的 每 个 顶点 提供 纹理 
坐标 。OpenGL 将 使 用 这 些 纹理 坐标 ， 碍 找 存储 在 纹理 图 像 中 的 引用 的 
纹 妹 的 颜色 ， 来 确定 模型 中 每 个 光栅 化 像素 的 颜色 。 为 了 确保 泻 染 模型 
中 的 每 个 像素 都 使 用 纹理 图 像 中 的 适当 纹 素 进 行 绘制 ， 纹 理 坐 标 也 需要 
被 放 入 顶点 属性 中 ， 以 便 它 们 也 由 光栅 着 色 器 进行 插值 。 以 这 种 方式 ， 
纹理 图 像 与 模型 项 点 一 起 被 插值 或 者 填充 。 





对 于 通过 顶点 着 色 器 的 每 组 顶点 坐标 (x,y,z)， 会 有 一 组 相应 的 纹理 
坐标 (s,t)。 因 此 ， 我 们 将 设置 两 个 缓冲 区 ， 一 个 用 于 顶点 (每 个 条 目 中 
有 3 个 分 量 x、y 和 z) ， 男 一 个 用 于 相应 的 纹理 坐标 每 个 条 目 中 有 两 个 
分 量 s 和 t) 。 这 样 ， 每 次 顶点 着 色 占 的 调用 接收 到 一 个 顶点 的 数据 ， 现 
在 包括 了 其 空间 坐标 和 相应 的 纹理 坐标 。 








2D 纹 理 坐 标 最 为 常见 OpenGL 确实 支持 其 他 一 些 维度 ， 但 我 们 不 
会 在 本 章 中 介绍 它们 ) 。2D 纹 理 图 像 被 设 定 为 矩形 ， 左 下 角 的 位 置 坐 
标 为 (0,0)， 右 上 角 的 位 置 坐标 为 (1,1)。 岂 理想 情况 下 ， 纹 理 坐 标 应 该 在 
[0...1] 范 围 内 取 值 。 


考虑 图 5.2 中 的 示例 。 回 想 一 下 ， 立 方 体 模 型 由 三 角形 构成 。 我 们 
的 示意 图 中 突出 显示 了 立方 体 一 侧 的 4 个 角 ， 但 请 记 住 ， 立 方 体 的 每 个 
正方 形 侧面 需要 两 个 三 角形 。 指 定 这 一 个 立方 体 侧面 的 6 个 顶点 中 的 每 
一 个 的 纹理 坐标 沿 着 4 个 角 列 出 ， 左 上 角 和 右 下 和 角 各 上 自由 一 对 顶点 组 
成 。 示 例 里 也 显示 了 纹理 图 像 。 纹 理 坐 标 〈 由 s 和 t 描 述 ) 将 图 像 的 部 分 
( 纹 系 ) 映 出 到 模型 正面 的 光栅 化 像素 上 。 请 注意 ， 顶 反之 间 的 所 有 中 
间 像 素 都 已 使 用 图 像 中 间 插 值 的 纹 素 进行 绘制 。 这 下 是 因为 纹理 坐标 在 
顶点 属性 中 被 发 送 到 片段 着 色 器 ， 因 此 也 像 项 点 本 身 一 样 被 插值 。 


纹理 图 像 


(0,1) 

















图 5.2 ”纹理 坐标 








在 这 个 示例 中 ， 出 于 说 明 的 目的 ， 我 们 故意 指定 了 会 导致 奇怪 的 表 
面 绘制 的 纹理 坐标 。 人 和 仔细 观察 ， 您 还 可 以 看 到 图 像 看 起 来 略微 拉 伸 一 一 
这 是 因为 纹理 图 像 的 长 宽 比 与 立方 体面 相关 的 给 定 纹 理 坐 标的 长 宽 比 不 





PLAC 





对 于 立方 体 或 金字 塔 这 样 的 简单 模型 ， 选 择 纹理 坐标 相对 容易 。 但 
对 于 具有 大 量 三 角形 的 更 复杂 的 弯曲 模型 ， 手 动 确定 它们 是 不 切实 际 
的 。 在 弯曲 的 几何 形状 〈 例 如 球形 或 环 面 ) 的 情况 下 ， 可 以 通过 算法 或 
数学 方式 计算 纹理 坐标 。 对 于 使 用 Maya [MA16] 或 Blender [BL16| 等 建 模 工 
具 构 建 的 模型 ， 这 些 工具 提供 有 “UV 映射 * 功 能 (在 本 书 范围 之 外 》， 
使 得 这 项 任务 更 容易 。 











让 我 们 回去 渲染 我 们 的 金字 塔 ， 只 是 这 次 用 砖 的 图 像 添 加 纹理 。 我 
们 需要 指定 : (Ca) 引用 纹理 图 像 的 整 型 ID; O) 模型 顶点 的 纹理 坐 
bys (CC) 用 于 保存 纹理 坐标 的 缓冲 区 ; Cd) 顶点 属性 ， 以 便 顶 点 着 色 
髓 可 以 接收 并 通过 管线 转发 纹理 坐标 Ce) 显卡 上 用 于 保存 纹理 对 象 
的 纹理 单元 ;(f) 我 们 将 很 快 看 到 的 用 于 访问 GLSL 中 纹理 单元 的 统一 
采样 器 变量 。 这 些 将 在 下 一 节 中 描述 。 


53 ”创建 纹理 对 象 





假设 此 处 显示 的 纹理 图 像 〈 如 图 5.3 所 示 ) 存储 在 名 
为 “brick1.jpg” 中 919 的 文件 中 。 




















图 5.3 ”纹理 图 像 


如 前 所 示 ， 我 们 可 以 通过 调用 loadTexture0) 函 数 来 加 载 此 图 像 ， 如 
下 所 示 : 


GLuint brickTexture = Utils::loadTexture("brick1.jpg"); 





回想 一 下 ， 纹 理 对 象 由 整 型 ID 标识 ， 因 此 brickTexture 的 类 型 为 
GLuint. 


5.4 构建 纹理 坐标 








我 们 的 金字 塔 有 4 个 三 角形 侧面 和 底部 的 正方 形 底面 。 虽 然 在 几何 
上 这 只 需要 5 个 点 ， 但 我 们 得 用 三 角形 来 泻 染 它 。 这 需要 4 个 三 角形 用 于 
侧面 ， 以 及 2 个 三 角形 用 于 正方 形 底 面 ， 总 共 6 个 三 角形 。 每 个 三 角形 有 
3 个 顶点 ， 必 须 在 模型 中 指定 总 共 6x3 = 18 个 顶点 。 








我 们 已 经 在 程序 4.3 的 浮 点 数组 pyramidPositions[ ] 中 列 出 了 人 金字塔 的 
几何 顶点 。 我 们 可 以 通过 多 种 方式 定位 纹理 坐标 ， 以 便 将 砖 纹理 绘制 到 
金字 塔 上 。 一 种 简单 〈 尽 管 不 完美 ) 的 方法 是 使 图 像 的 顶部 中 心 对 应 于 
金字 塔 的 尖顶 ， 如 图 5.4 所 示 。 





图 5.4 纹理 图 像 的 顶部 中 心 对 应 金字 塔 的 尖顶 
我 们 可 以 为 所 有 4 个 三 角形 侧面 这 样 做 。 我 们 还 需要 绘制 金字 塔 的 
正方 形 底 面 ， 它 由 2 个 三 角形 组 成 。 一 个 简单 而 合理 的 方法 是 用 图 片 中 
的 整个 区 域 为 其 添加 纹理 〈 图 5.5 所 示 的 金字 塔 己 被 向 后 放 倒 ， 一 个 侧 
BH RD 。 


金字 塔 顶 





图 5.5 “为 金字 塔 底面 添加 纹理 





对 程序 4.3 中 前 9 个 金字 塔 顶点 使 用 这 个 非常 简单 的 策略 ， 相 应 的 顶 
点 和 纹理 坐标 数据 组 如 图 5.6 所 示 。 


纹理 坐标 
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图 5.6 金字塔 的 纹理 坐标 (部 分 清单 ) 








5.5 将 纹理 坐标 载 入 缓冲 区 


我 们 可 以 用 与 前 面 加 载 项 点 相似 的 方式 将 纹理 坐标 加 载 到 VBO 中 。 
在 setupVertices() 中 ， 我 们 添加 以 下 纹理 坐标 值 声 明 : 
float pyrTexCoords[36] = 


{ @.0f, 6.06f, 1.0f, 60.6f, 60.5f, 1.6f, 0.6f, 0.6f, 1.0f, 6.06f, O.5f, 1.6f 
> // 前 侧面 、 右 侧面 





6.6f，6.6f，1.6f，68.9f，6.5f，1.6f，  O.0f, 0.6f, 1.0f, O.0f, O.5f, 1.6f 
» // 后 侧面 、 左 侧面 

Q.0f, 0.6f, 1.0f, 1.0f, 60.6f, 1.6f, 1.6f, 1.0f, 0.60f, 0.60f, 1.0f, 0.6f 
}; // 底面 的 两 个 三 角形 























然后 ， 在 创建 至 少 两 个 VBO (一 个 用 于 顶点 ， 一 个 用 于 纹理 坐标 ) 
之 后 ， 我 们 添加 以 下 代码 行 以 将 纹理 坐标 加 载 到 VBO #1: 
glBindBuffer(GL_ARRAY_BUFFER, vbo[1]); 


glBufferData(GL_ARRAY_BUFFER, sizeof(pyrTexCoords), pyrTexCoords, GL_STATI 
C_DRAW); 





5.6 ”在 着 色 器 中 使 用 纹理 ; 采样 器 变量 和 纹理 单 
Ju 


为 了 最 大 限度 地 提高 性 能 ， 我 们 希望 在 硬件 中 执行 纹理 处 理 。 这 意 
味 着 我 们 的 片段 着 色 器 需要 一 种 访问 我 们 在 C++/OpenGL 应 用 程序 中 创 
建 的 纹理 对 象 的 方法 。 它 的 实现 机 制 是 通过 一 个 叫 作 统 一 采样 器 变量 的 
特殊 GLSL 工 具 。 这 是 一 个 变量 ， 用 于 指示 显卡 上 的 纹理 单元 ， 从 加 载 
的 纹理 对 象 中 提取 或 “采样 ”哪个 纹 素 。 








在 着 色 器 中 声明 一 个 采样 器 变量 很 简单 
一 变量 中 : 


我 们 声明 的 变量 名 字 叫 作 *samp”。 声 明 的 "layout (binding=0)” 部 分 
指定 此 采样 堪 与 纹理 单元 0 相关 联 。 


只 需 将 其 添加 到 您 的 统 








纹理 单元 〈 和 相关 的 采样 器 ) 可 用 于 对 您 希望 的 任何 纹理 对 象 进行 
采样 ， 并 且 可 以 在 运行 时 进行 更 改 。 您 的 display0 函 数 需 要 指定 纹理 单 
元 要 为 当前 帧 采样 的 纹理 对 象 。 因 此 ， 每 次 绘制 对 象 时 ， 都 需要 激活 纹 
理 单元 并 将 其 绑 定 到 特定 的 纹理 对 象 ， 例 如 ; 


glActiveTexture(GL_TEXTURE®@) ; 
glBindTexture(GL_TEXTURE_2D, brickTexture) ; 

可 用 纹理 单元 的 数量 取决 于 图 形 卡 上 提供 的 数量 。 根 据 OpenGL 
API 文 档 ，OpenGL 4.5 版 要 求 每 个 着 色 器 阶段 至 少 有 16 个 ， 所 有 阶段 总 


共 至 少 80 个 单元 [oz161。 在 这 个 例子 中 ， 我 们 通过 在 glActiveTexture() 调 
用 中 指定 GL_TEXTURE0， 使 得 第 0 个 纹理 单元 处 于 激活 状态 。 


要 实际 执行 纹理 处 理 ， 我 们 需要 修改 片段 着 色 需 输出 颜色 的 方式 。 
以 前 ， 我 们 的 片段 着 色 器 要 么 输出 一 个 固定 的 颜色 常量 ， 要 么 从 顶点 属 
性 获取 颜色 。 相 反 ， 这 次 我 们 需要 使 用 从 顶点 着 色 器 (通过 光栅 着色 
器 ) 接收 的 插值 纹理 坐标 来 对 纹理 对 象 进行 采样 ， 像 这 样 调用 texture() 
PA BN: 




















in vec2 tc; // 纹理 4 





color = texture(samp, tc); 








5.7 纹理 贴图 : 示例 程序 


程序 5.1 将 前 面 介 绍 的 步骤 合并 为 一 个 程序 。 输 出 结果 显示 了 用 砖 
图 像 纹理 贴图 的 金字 塔 ， 如 图 5.7 所 示 。 两 个 旋转 (代码 清单 中 未 显 
示 ) 被 添加 到 金字 塔 的 模型 官 阵 中 以 暴露 金字 塔 的 底面 。 




















图 5.7 使 用 砖 图 像 纹 理 贴图 后 的 金字 塔 











现在 ， 根 据 需 要 ， 通 过 更 改 loadTextureO 调 用 中 的 文件 名 ， 将 砖 纹 
理 图 像 蔡 换 为 其 他 纹理 图 像 是 一 件 简 单 的 事情 。 人 例如， 如果 我 们 用 图 像 
文件 “ice.jpg”I0161 蔡 换 “brick1l.jpg”， 我 们 得 到 的 结果 如 图 5.8 所 示 。 

















图 5.8 “使 用 “ 冰 ” 图 像 纹理 贴图 后 的 金字 塔 

















程序 5.1 砖 纹理 的 金字 塔 








C++/OpenGL 应 用 程序 


#include <SOIL2/soil2.h> 
// 其 他 #include 和 以 前 一 样 





#define numVAOs 1 
#define numVBOs 2 








// 摄像 机 和 对 象 位置 、 演 染 程序 、vVAO 和 VBO 的 变量 和 以 前 一 样 














// 显示 函数 的 变量 分 配 和 以 前 一 样 
GLuint brickTexture; 


void setupVertices(void) { 
float pyramidPositions[54] = { /* 如 程序 4.2 中 列 出 的 数据 */ 





float pyrTexCoords[36] = { 
0.0f, 60.6f, 1.0f, O.ef, O.5f, 1.0f, 0.0f, 0.6f, 1.0f, 0.6f, O.5F 
, 1.0Ff, 


Q.0f, @.0f, 1.0f, 6.06f, O.5f, 1.6f, Q.0f, @.0f, 1.0f, 6.06f, O.5F 


, 1.0Ff, 
6.6f，6.6f，1.6f，1.6f，6.6f，1.6f， 1.6f，1.6f，6.6f，6.6f，1.6f 
, 0.0Ff 
3 
// . . . 像 以 前 一 样 生成 VAO 和 至 少 两 个 VB0， 并 加 载 两 个 缓冲 区 : 








glBindBuffer(GL ARRAY BUFFER, vbo[®@]); 
glBufferData(GL ARRAY BUFFER, sizeof(pyramidPositions), pyramidPosition 
s, GL_STATIC_DRAW); 


glBindBuffer(GL_ARRAY_BUFFER, vbo[1]); 

glBufferData(GL_ARRAY_BUFFER, sizeof(pyrTexCoords), pyrTexCoords, GL_ST 
ATIC_DRAW) ; 
} 


void init(GLFWwindow* window) { 


// 泻 染 程序 配置 、 摄 像 机 和 对 象 位 置 没有 改变 





Ce 











brickTexture = Utils::loadTexture("brick1.jpg"); 
} 


void display(GLFWwindow* window, double currentTime) { 





// 背景 颜色 配置 、 深 度 缓 冲 区 、 演 染 程序 ， 以 及 M、V、MV、PR0O] 和 矩阵 没有 变化 























glBindBuffer(GL_ARRAY_BUFFER, vbo[ð]); 
glVertexAttribPointer(@, 3, GL_FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray(@) ; 


glBindBuffer(GL_ARRAY_BUFFER, vbo[1]); 
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray(1) ; 


glActiveTexture(GL_TEXTURE®@) ; 
glBindTexture(GL_TEXTURE_2D, brickTexture) ; 


glEnable(GL_DEPTH_TEST); 
glDepthFunc(GL_LEQUAL) ; 


glDrawArrays(GL_TRIANGLES, ©, 18); 
} 


// main() 和 以 前 一 样 
顶点 着 色 器 





#version 430 

layout (location=@) in vec3 pos; 

layout (location=1) in vec2 texCoord; 

out vec2 tc; // 纹理 坐标 输出 到 光栅 着 色 器 用 于 插值 

uniform mat4 mv_matrix; 

uniform mat4 proj_matrix; 

layout (binding=@) uniform sampler2D samp; // 顶点 ， 着 色 器 中 未 使 用 



































void main(void) 
{ gl Position = proj_matrix * mv_matrix * vec4(pos,1.@); 
tc = texCoord; 


} 
片段 着 色 器 





#version 430 

in vec2 tc; // 输入 插值 过 的 材质 坐标 
out vec4 color; 

uniform mat4 mv_matrix; 

uniform mat4 proj_matrix; 

layout (binding=@) uniform sampler2D samp; 





void main(void) 
{ color = texture(samp, tc); 


} 





5.8 多 级 潮 远 纹理 贴图 


纹理 贴图 经 常会 在 泻 染 图 像 中 产生 各 种 不 期 望 的 伪 影 。 这 是 因为 纹 
理 图 像 的 分 辨 率 或 长 宽 比 很 少 与 被 纹理 贴图 的 场景 中 区 域 的 分 辨 率 或 长 
宽 比 相 匹 配 。 





当 图 像 分 状 率 小 于 所 绘制 区 域 的 分 状 紊 时， 会 出 现 一 种 很 常见 的 伪 
影 。 在 这 种 情况 下 ， 需 要 拉 伸 图 像 以 窗 六 整 个 区 域 ， 束 会 变 得 模糊 (并 
且 可 能 变形 ) 。 根 据 纹理 的 性 质 ， 有 时 可 以 通过 改变 纹理 坐标 分 配方 式 
来 对 抗 这 种 情况 ， 使 得 纹理 需要 较 少 的 拉 伸 。 另 一 种 解决 方案 是 使 用 更 
Ty) HER EN CBE A RR 





HRA re ARBANI EK TRR EXE RR a 
能 并 不 是 很 容易 理解 为 什么 这 会 造成 问题 ， 但 确实 如 此 ! 在 这 种 情况 
下 ， 可 能 会 出 现 明显 的 有 登 影 伪 影 ， 从 而 产生 奇怪 的 错误 图 案 ， 或 移动 物 
体 中 的 “内 烁 效果。 

登 影 是 由 采样 错误 引起 的 。 它 通 利 与 信号 处 理 有 关 ， 不 充分 采样 的 
言 号 被 重建 时 ， 看 起 来 会 具有 和 实际 不 同 的 特性 “例如 波长 ) 。 例 于 如 
图 5.9 所 示 《〈 见 彩 插 ) 。 原 始 波形 显示 为 红色 ， 治 波形 的 黄 点 代表 采样 
点 。 如 宁 采 样 点 被 用 于 重建 波形 ， 并 且 采 样 频率 不 足 ， 则 可 能 会 定义 出 
不 同 的 波形 (以 蓝 色 显示 )。 


NT 


图 5.9 NFR ACRE LE A Ba 




















FAS, TEACH A, SE RS CA AT) 图 像 
时 《例如 使 用 统一 采样 器 变量 时 ) ， 提 取 到 的 颜色 将 不 足以 反映 图 像 中 
的 实际 细节 ， 而 是 可 能 看 起 来 很 随机 。 如 果 纹 理 图 像 具 有 重复 图 案 ， 则 
合影 可 能 导致 生成 与 原始 图 像 不 同 的 图 案 。 如 果 被 纹理 贴图 的 对 象 正在 
移动 ， 则 纹 素 碍 找 中 的 舍 入 误 兰 可 能 导致 给 定 纹理 坐标 处 的 采样 像素 的 
不 断 变 化 ， 从 而 在 被 绘制 对 象 的 表面 上 产生 不 希望 的 内 烁 效果 。 











图 5.10 显 示 了 一 个 立方 体 项 部 的 倾斜 渲染 特写 ， 该 立方 体 使 用 大 斥 
二 高 分 辨 率 棋 盘 图 像 进行 纹理 贴图 。 




















图 5.10 ACH AHA ea 








FE PRT AB GUE HA oe CAE mE, MARRE E SRA? 
条 。 虽 然 我 们 无 法 在 静止 图 像 中 展示 ， 但 如 打 这 是 一 个 动画 场景 ， 则 看 
起 来 的 图 案 可 能 会 在 各 种 不 正确 的 图 案 〈 包 括 图 示 的 这 一 个 在 内 ) 之 间 
波动 。 


另 一 个 例子 如 图 5.11 所 示 ， 其 中 的 立方 体 己 经 使 用 月 球 表面 的 图 像 
1 进行 纹理 贴图 。 乍 一 看 ， 这 张 图 片 显得 清晰 而 细节 丰富 。 然 而 ， 
图 像 右 上 部 分 的 茶 些 细 市 是 错误 的 ， 并 且 当 立方 体 对 象 ( 或 相机 ) 移动 
时 会 导致 "内 烁 ”。 不 六 的 是 ， 我 们 无 法 在 静止 图 像 中 清楚 地 显示 内 炼 
效果 。) 








图 5.11 纹理 贴图 中 的 “闪烁 ” 


使 用 多 级 渐 远 纹理 贴图 (Mipmapping) 技术 可 以 在 很 大 程度 上 校正 
这 一 类 的 采样 误差 伪 影 ， 它 需要 用 各 种 分 辨 率 创 建 纹理 图 像 的 不 同 版 
本 。 然 后 ，OpenGL 使 用 最 适合 正在 处 理 的 这 一 点 处 的 分 辨 率 的 纹理 图 
像 进行 纹理 贴图 。 更 好 的 是 ， 可 以 为 被 贴图 的 区 域 使 用 最 适合 的 分 辨 率 
的 纹理 图 像 的 平均 颜色 。 多 级 渐 远 纹理 贴图 应 用 于 图 5.10 和 图 5.11 中 的 
图 像 的 结果 如 图 5.12 所 示 。 














图 5.12 ”多 级 渐 远 纹理 贴图 结果 


多 级 渐 远 纹理 贴图 通过 一 种 巧妙 的 机 制 来 工作 ， 它 在 纹理 图 像 中 存 
储 相同 图 像 的 连续 的 一 系列 较 低 分 辩 率 的 副本 ， 所 用 的 纹理 图 像 比 原始 
图 像 大 1/3。 这 是 通过 将 图 像 的 R、G 和 B 分 量 分 别 存储 在 纹理 图 像 空间 
的 3 个 1/4 中 来 实现 的 ， 然 后 在 剩余 的 1/4 图 像 空间 中 对 于 同一 图 像 重复 相 
当 于 原始 分 辩 率 1/4 的 处 理 。 重 复 该 细 分 直到 剩余 象限 太 小 而 不 包含 任 
何 有 用 的 图 像 数据 。 示 例 图 像 和 生成 的 多 级 渐 远 纹理 的 可 视 化 如 图 5.13 
所 示 〈 见 彩 插 〉。 








图 5.13 ”为 图 片 生成 多 级 渐 远 纹理 


这 种 将 几 个 图 像 填充 到 一 个 小 空间 中 的 方法 (只 比 存储 原始 图 像 所 
需 的 空间 大 一 点 ) 是 Mipmapping 得 名 的 原因 。MIP 代 表 拉 丁 语 Multum 
In Parvo WI83]， 意 思 是 “在 很 小 的 空间 里 有 很 多 东西 ”。 











实际 给 对 象 添加 纹理 时 ， 可 以 通过 多 种 方式 对 多 级 渐 远 纹理 进行 采 
样 。 在 OpenGL 中 ， 可 以 通过 将 GL_TEXTURE_MIN_FILTER 参 数 设置 
为 所 需 的 缩小 方法 来 选择 多 级 渐 远 纹理 的 采样 方式 ， 可 以 选取 以 下 方法 


AN 


e GL_NEAREST_MIPMAP_NEAREST 
选择 具有 与 纹 素 区 域 最 相似 的 分 辨 率 的 多 级 渐 远 纹理 。 然 后 ， 它 获 
得 所 需 纹 理 坐 标的 最 近 纹 素 。 

e GL LINEAR MIPMAP_ NEAREST 
选择 具有 与 纹 素 区 域 最 相似 的 分 辨 率 的 多 级 渐 远 纹理 。 然 后 它 取 最 
接近 纹理 坐标 的 4 个 纹 素 的 插值 。 这 被 称 为 “线性 过 滤 ”。 

e GL NEAREST MIPMAP LINEAR 
选择 具有 与 纹 素 区 域 最 相似 的 分 辨 紊 的 2 个 多 级 渐 远 纹理 。 然 后 ， 
它 从 每 个 多 级 渐 远 纹理 获取 纹理 坐标 的 最 近 纹 素 并 对 其 进行 插值 。 
这 被 称 为 “ 双 线 性 过 滤 ”。 

e GL LINEAR MIPMAP LINEAR 
选择 具有 与 纹 素 区 域 最 相似 的 分 辨 紊 的 2 个 多 级 渐 远 纹理 。 然 后 ， 
它 取 各 自 最 接近 纹理 坐标 的 4 个 纹 素 ， 并 计算 插值 。 这 被 称 为 “三 线 
性 过 滤 ”， 如 图 5.11 所 示 。 








三 线性 过 沽 通常 是 比较 好 的 选择 ， 因 为 较 低 的 混合 级 别 通 冲 会 产生 
伪 影 ， 例 如 多 级 渐 远 纹理 级 别 之 间 的 可 见 分离 。 图 5.14 显 示 了 只 局 用 了 
线性 过 滤 的 使 用 多 级 渐 远 纹理 的 棋盘 的 特写 。 请 注意 在 多 级 渐 远 纹理 的 
边界 处 垂直 线 突 然 从 粗 变 为 细 《〈 图 中 鸭 出 的 位 置 的 伪 影 ) 。 相 比 之 下 ， 
图 5.15 中 的 示例 使 用 了 三 线性 过 小 。 











图 5.14 ”线性 过 小 伪 影 
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图 5.15 “三 线性 过 滤 





OpenGL 提 供 了 丰富 的 多 级 渐 远 纹理 文 持 。 有 一 些 机 制 可 用 于 构建 
你 自己 的 多 级 渐 远 纹理 级 别 ， 或 者 让 OpenGL 为 你 构建 它们 。 在 大 多 数 
m F, OpenGL 自动 构建 的 多 级 渐 远 纹理 已 足够 。 这 是 通过 将 以 下 代 
码 行 添加 进 getTextureObjectO 函 数 之 后 立即 执行 的 Utils:: loadTexture() XI 
数 〈( 前 面 的 5.1 市 中 介绍 过 )〉 中 实现 的 : 


glBindTexture(GL_TEXTURE_2D, textureID) ; 
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN FILTER, GL_LINEAR MIPMAP_LIN 


EAR); 
glGenerateMipmap(GL_TEXTURE_2D) ; 





这 通知 DOpenGL 生 成 多 级 渐 远 纹理 。 使 用 glBindTextureO 调 用 激活 砖 


纹理 ， 然 后 glTexParameteriO 函 数 调用 局 用 前 面 列 出 的 缩小 方法 之 一 ， 
例如 上 面 调用 中 显示 的 GL_LINEAR_MIPMAP LINEAR， 它 启用 三 线性 
过 滤 。 


构建 多 级 渐 远 纹理 后 ， 可 以 通过 再 次 调用 glTexParameteri(0) 来 更 改 
过 小 选项 (尽管 这 很 少 需 要 ) ， 例 如 在 display 函 数 中 。 甚 至 可 以 通过 选 
择 GL_NEAREST 或 GL_LINEAR 来 禁用 多 级 渐 远 纹理 。 


对 于 关键 应 用 程序 ， 可 以 使 用 您 喜欢 的 任何 图 像 编 辑 软件 自行 构建 
多 级 渐 远 纹理 。 然 后 可 以 通过 为 每 个 多 级 渐 远 纹理 级 别 重复 调用 
OpenGL 的 glLTexImage2D0O 函 数 来 创建 纹理 对 象 ， 并 将 它们 添加 为 多 级 
渐 远 纹理 级 别 。 对 这 种 方法 的 进一步 讨论 超出 了 本 书 的 范围 。 


5.9 IH ERIE 


多 级 渐 远 纹理 贴图 有 时 看 起 来 比 非 多 级 渐 远 纹理 贴图 更 模糊 ， 无 其 
是 当 被 贴图 对 象 以 严重 倾斜 的 视角 泻 染 时 。 我 们 在 图 5.12 中 看 到 了 一 个 
这 样 的 例子 ， 使 用 多 级 渐 远 纹理 减少 伪 影 的 同时 也 减少 了 图 像 细 节 与 
图 5.11 相 比 ) 。 


这 种 细 市 的 丢失 是 因为 当 物 体 倾斜 时 ， 其 基 元 看 起 来 沿 一 个 轴 〈 即 
宽度 或 高 度 〉 比 沿 男 一 个 轴 更 小 。 当 OpenGL 为 图 元 贴图 时 ， 它 选择 适 
合 两 个 轴 中 较 小 的 轴 的 多 级 渐 远 纹理 (以 避免 “闪烁 * 伪 影 ，。 在 图 5.12 
中 ， 表 面 远离 观察 者 倾斜 ， 因 此 每 个 泻 染 图 元 将 使 用 适合 其 更 小 的 珊 度 
的 多 级 渐 远 纹理 ， 这 可 能 对 其 宽度 来 说 分 辨 率 太 小 了 。 











一 种 恢复 一 些 丢失 细节 的 方法 是 使 用 各 向 异性 过 滤 CAB) 。 标 准 
的 多 级 渐 远 纹理 贴图 以 各 种 正方 形 分 辨 率 〈 例 如 256 像 素 x256 像 素 、128 
像素 x128 像 素 等 ) 对 纹理 图 像 进行 采样 ， 而 AF 却 以 多 种 矩形 分 辩 率 对 
纹理 进行 采样 ， 例 如 256 像 素 x128 像 素 、64 像 素 x128 像 素 等 。 这 使 得 从 
各 种 角度 观看 并 同时 在 纹理 中 保留 尽 可 能 多 的 细节 成 为 可 能 。 











各 向 异 性 过 滤 比 标准 多 级 渐 远 纹理 贴图 在 计算 上 代价 更 高 ， 并 且 不 
是 OpenGL 的 必需 部 分 。 但 是 ， 大 多 数 显 卡 都 文 持 AFE《〈 这 被 称 为 
OpenGL 扩 展 ) ， 而 OpenGL 确 实 提 供 了 一 种 查询 显卡 是 否 文 持 AF 的 方 
法 ， 以 及 一 种 访问 AF 的 方法 。 生 成 多 级 渐 远 纹理 贴图 后 立即 添加 代 
fg: 











// 如 果 启 用 多 级 渐 远 纹理 贴图 

glBindTexture(GL TEXTURE 2D, textureID); 

glTexParameteri(GL_TEXTURE_2D, GL TEXTURE MIN FILTER, GL LINEAR MIPMAP_LIN 
EAR); 

glGenerateMipmap(GL_TEXTURE_2D) ; 


// 如 果 还 启用 各 向 异性 过 滤 

if (glewIsSupported("GL_EXT_texture_filter_anisotropic")) { 
GLfloat anisoSetting = 6.6f; 
glGetFloatv(GL_MAX_TEXTURE_MAX_ANISOTROPY_EXT, &anisoSetting) ; 
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAX_ANISOTROPY_EXT, anisoSet 

ting); 

} 














对 glewIsSupported0 的 调用 测试 显卡 是 否 支 持 AFE。 如 果 支 持 ， 我 们 
将 其 设置 为 文 持 的 最 大 采样 程度 ， 这 个 最 大 值 使 用 glGetFloatv0O 获 取 。 
然后 使 用 glTexParameterfO 将 其 应 用 于 激活 纹理 对 象 。 结 果 如 图 5.16 所 
示 。 请 注意 ， 图 5.11 中 的 大 部 分 丢失 细节 已 经 恢复 ， 同 时 仍然 消除 了 内 
烁 的 伪 影 。 








图 5.16 ”各 向 异性 过 滤 


5.10 ”环绕 和 平 铺 


到 目前 为 止 ， 我 们 假设 纹理 坐标 都 落 在 [0...1] 范 围 内 。 但 是 ， 
OpenGL 实 际 上 支持 任何 取 值 的 纹理 坐标 。 有 几 个 选项 可 以 用 来 指定 当 
纹理 坐标 超出 范围 [0...H 时 会 发 生 什 么 。 使 用 glTexParameteriO 设 置 所 需 
的 行为 ， 选 项 如 下 。 

。 GL_REPEAT: 忽略 纹理 坐标 的 整数 部 分 ， 生 成 重复 或 * 平 铺 ” 图 

案 。 这 是 默认 行为 。 

e GL_MIRRORED_REPEAT: 忽略 整数 部 分 ， 但 是 当 整 数 部 分 为 奇 

数 时 坐标 反 转 ， 因 此 重复 的 图 案 在 正常 和 镜像 之 间 交 蔡 。 

e GL_CLAMP_TO_EDGE: 小 于 0 或 大 于 1 的 坐标 分 别 设置 为 Oo 和 1。 
e GL_CLAMP_TO_BORDER: 将 [0...1] 以 外 的 纹 素 设置 成 指定 的 边 


HERE. 

例如 ， 考 虑 一 个 金字 塔 ， 其 纹理 坐标 已 在 [0...5] 范 围 ， 而 不 是 通常 
的 [0...1] 范 围 内 定义 。 默 认 行 为 (GL_REPEAT) ， 使 用 前 面 图 5.2 中 显 
示 的 纹理 图 像 ， 将 导致 纹理 在 表面 上 重复 五 次 《有 时 称 为 * 平 铺 ”) ， 如 








图 5.17 所 示 。 











图 5.17 使 用 GL_REPEAT 环 绕 的 纹理 坐标 


为 了 使 乎 铺 块 的 外 观 在 正 稼 和 镜像 之 间 交 苦 ， 我 们 可 以 指定 以 下 内 


中 


glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL MIRRORED REPEAT); 





glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_MIRRORED REPEAT); 


通过 将 GL_MIRRORED REPEAT##ANGL_CLAMP_ TO EDGE, 
可 以 指定 将 小 于 0 或 大 于 1 的 值 分 别 设置 为 0 和 1。 


可 以 按 如 下 方式 来 指定 小 于 0 或 大 于 1 的 值 输出 “边框 ”颜色 : 


glTexParameteri(GL TEXTURE 2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO BORDER); 
glTexParameteri(GL TEXTURE 2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO BORDER); 


float redColor[4] = { 1.6f, 6.6f, 68.6f, 1.6f }; 
glTexParameterfv(GL TEXTURE 2D, GL_TEXTURE_BORDER_COLOR, redColor); 





图 5.18〔 见 彩 插 中 分 别 ( 从 左 到 右 ) 显示 了 每 一 个 选项 (镜像 重 
复 、 夹 紧 到 边缘 和 夹 聚 到 边框 ) 的 效果 ， 纹 理 坐 标 范围 为 -2 一 +3。 





图 5.18 ”使 用 不 同 环绕 选项 的 金字 塔 材 质 贴图 


在 中 间 的 示例 (来 紧 到 边缘 ) 中 ， 沿 纹理 图 像 边缘 的 像素 癌 外 复 
制 。 注 意 ， 作 为 副作用 ， 人 金字塔 面 的 左下 和 右 下 区 域 分 别 从 纹理 图 像 的 
左下 和 右 下 像 系 获 得 它们 的 闫 色 。 





5.11 透视 变形 


我 们 已 经 看 到 ， 当 纹理 坐标 从 顶点 着 色 器 传递 到 片段 着 色 器 时 ， 它 
们 通过 光栅 着 色 器 并 被 插值 。 我 们 还 看 到 ， 这 是 自动 线性 插值 的 结果 ， 
总 是 在 顶点 属性 上 执行 。 


然而 ， 在 纹理 坐标 的 情况 下 ， 线 性 插值 可 能 导致 共有 透视 投影 的 
3D 场 景 中 的 可 以 察觉 的 失真 。 


考虑 一 个 由 两 个 三 角形 组 成 的 矩形 ， 纹 理 贴 图 是 棋盘 图 像 ， 面 癌 相 
机 。 当 和 矩形 围绕 X 轴 旋转 时 ， 窍 形 的 项 部 会 倾斜 并 远离 相机 ， 而 矩形 的 
下 半 部 分 则 更 靠近 相机 。 因 此 ， 我 们 和 希望 顶部 的 方块 变 小 ， 底 部 的 方块 
变 大 。 但 是 ， 纹 理 坐 标的 线性 插值 将 导致 所 有 正方 形 的 高 度 相 等 。 治 痢 
构成 矩形 的 两 个 三 角形 之 间 的 对 角 线 的 失真 加 剧 。 产 生 的 失真 如 图 5.19 
所 示 。 


























图 5.19 ”纹理 透视 失真 





幸运 的 是 ， 存 在 用 于 校正 透视 失真 的 算法 ， 并 且 默 认 情 况 下 ， 
OpenGL 在 光栅 化 期 间 会 应 用 透视 校正 算法 [of4。 图 5.20 显 示 了 由 
OpenGL 正 确 呈 现 的 相同 的 旋转 棋盘 。 








图 5.20 OpenGL 透视 校正 





虽然 不 和 常见， 但 可 以 通过 在 包含 纹理 坐标 的 顶点 属性 的 声明 中 添加 
关键 字 “noperspective” 来 禁用 OpenGL 的 透视 校正 。 必 须 在 顶点 着 色 器 和 
片段 着 色 器 中 都 这 样 添 加 。 例 如 ， 顶 点 着 色 器 中 的 顶点 属性 将 声明 如 
下 : 


noperspective out vec2 texCoord; 


片段 着 色 器 中 的 相应 属性 声明 : 


noperspective in vec2 texCoord; 


实际 上 ， 我 使 用 了 这 种 语法 来 生成 图 5.19 中 的 扭曲 棋盘 格 。 





5.12 材质 一 一 更 多 OpenGL 细 市 


我 们 在 本 书 中 使 用 的 SOIL2 纹 理 图 像 加 载 库 具 有 使 用 起 来 相对 简单 
和 直观 的 优点 。 但 是 ， 在 学 习 OpenGL 时 ， 使 用 SOIL2 会 产生 一 项 我 们 
不 想 要 的 后 果 ， 即 用 户 会 接触 不 到 一 些 有 用 的 重要 OpenGL 细 节 。 在 本 
节 中 ， 我 们 将 描述 程序 员 在 没有 纹理 加 载 库 〈 如 SOIL2) 的 情况 下 加 载 
和 使 用 纹理 时 需要 了 解 的 一 些 细 节 。 


可 以 使 用 C++ 和 OpenGL 函 数 直接 将 纹理 图 像 文件 数据 加 载 到 
OpenGL 中 。 虽 然 它 有 反复 某 ， 但 并 不 少见 。 一 般 步 又 如 下 。 





(1) 使 用 C++ 工具 该 取 图 像 文 件 。 
(2) 生成 OpenGL 纹 理 对 象 。 
(3) 将 图 像 文 件数 据 复制 到 纹理 对 象 中 。 


我 们 不 会 详细 描述 第 一 步 一 一 有 太 多 方法 了 了。 在 opengl- 
tutorials.org (具体 的 教程 页 面 为 OT18]) 中 很 好 地 描述 了 一 种 方法 ， 并 使 
用 C++ 函数 fopen0 和 fread0 将 数据 从 .bmp 图 像 文 件 读 入 unsigned char 类 型 
的 数组 中 。 





步骤 2 和 步骤 3 更 通用 ， 主 要 涉及 OpenGL 调 用 。 在 第 2 步 中 ， 我 们 使 
用 OpenGL 的 glGenTexturesO 命 令 创建 一 个 或 多 个 纹理 对 象 。 例 如 ， 生 成 





单个 OpenGL 纹 理 对 象 〈《 使 用 整 型 引用 ID ) 可 以 按 如 下 方式 完成 : 




















GLuint textureID; // 或 者 G6Luint 类 型 的 数组 ， 如 果 需 要 创建 多 于 一 个 纹理 和 
象 


glGenTextures(1, &textureID); 





在 步骤 3 中 ， 我 们 将 步骤 1 中 的 图 像 数 据 关 联 到 步骤 2 中 创建 的 纹理 
对 象 。 这 是 使 用 OpenGL 的 glTexImage2D0O 命 令 完 成 的 。 下 面 的 示例 将 
图 像 数 据 从 步骤 1 中 描述 的 unsigned char 数 组 〈 此 处 表示 为 “data”) 加载 
到 步骤 2 中 创建 的 纹理 对 象 中 : 


glBindTexture(GL_TEXTURE_2D, textureID) 
glTexImage2D(GL_TEXTURE_2D, @,GL_RGB, width, height, Ø, GL_BGR, 


GL_UNSIGNED_ BYTE, da 





ta); 


此 时 ， 本 章 前 面 介 绍 的 用 于 设置 多 级 渐 远 纹理 贴图 等 的 各 种 
中 TexParameteriO 调 用 也 可 以 应 用 于 纹理 对 象 。 我 们 现在 也 以 与 本 章 所 
述 相同 的 方式 使 用 整 型 引用 CtextureID) 。 


补充 说 明 











研究 人 员 开 发 了 纹理 单元 的 许多 用 途 ， 不 仅仅 是 场景 中 的 纹理 模 
型 。 在 后 面 的 章节 中 ， 我 们 将 看 到 如 何 使 用 纹理 单元 来 改变 物体 反射 光 
线 的 方式 ， 使 其 看 起 来 止 凸 不 平 。 我 们 还 可 以 使 用 纹理 单元 来 存储 “高 
度 图 ?以 生成 地 形 ， 以 及 存储 “阴影 贴图 "以 有 效 地 为 场景 添加 阴影 。 这 
些 用 途 将 在 后 续 章节 中 描述 。 








着 色 器 还 可 以 向 纹理 写 入 数据 ， 允 许 着 色 器 修改 纹理 图 像 ， 甚 至 将 
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多 级 渐 远 纹理 贴图 和 各 癌 异 性 过 滤 不 是 减少 纹理 中 的 登 影 伪 影 的 唯 
一 工具 。 例 如 ， 全 屏 抗 锯齿 (Full-scene anti-aliasing, FSAA) 和 其 他 超 
采样 方法 也 可 以 改善 3D 场 景 中 纹理 的 外 观 。 虽 然 不 是 OpenGL 核 心 的 一 
部 分 ， 但 它们 通过 OpenGL 的 扩展 机 制 IoE169 在 许多 显卡 上 得 到 支持 。 











还 有 一 种 用 于 配置 和 管理 纹理 和 采样 器 的 答 代 机 制 。OpenGL 3.3 版 
引入 了 采样 历 对 宗 《〈《 有 时 称 为 “采样 需 状态 ”一 一 个 要 与 采样 器 变量 混 
消 ) ， 可 用 于 保存 一 组 独立 于 实际 纹理 对 象 的 纹理 设置 。 采 样 器 对 象 附 
加 到 纹理 单元 ， 可 以 方便 有 效 地 更 改 纹理 设置 。 本 教材 中 显示 的 示例 非 
常 简 日， 我 们 决定 暂 不 介绍 采样 占 对 象 。 对 于 感 兴 趣 的 读者 ， 采 样 器 对 
象 的 使 用 很 容易 学 习 ， 并 且 有 许多 优秀 的 在 线 教程 (例如 [CRY1) 。 











习题 


5.1 如 5.11 节 所 述 ， 通 过 在 纹理 坐标 顶点 属性 中 添 
加 “noperspective” 声 明 来 修改 程序 5.1。 然 后 重新 运行 程序 并 将 输出 与 原 
始 输 出 进行 比较 。 是 否 有 任何 明显 的 透视 变形 ? 








5.2 ”使 用 简单 的 “画图 ”程序 (如 Windows“ 画 图 ”或 GIMPICI161) ， 
绘制 自己 设计 的 手绘 画面 。 然 后 使 用 您 的 图 像 在 程序 5.1 中 为 金字 塔 添 
加 纹理 贴图 。 


53 (CHH) 修改 程序 4.4， 使 “太阳 ”行星 "和 “月 亮 " 具 有 纹理 。 您 
可 以 继续 使 用 已 存在 的 形状 ， 也 可 以 使 用 任何 您 喜欢 的 纹理 。 通 过 搜索 





一 些 发 布 的 代码 示例 可 以 获得 立方 体 的 纹理 坐标 ， 或 者 您 可 以 手动 构建 
它们 《尽管 这 有 点 单调 乏味 ) 。 
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[这 是 OpenGL 纹 理 对 象 所 采用 的 方向 。 然 而 ， 这 与 存储 在 许多 标准 
图 像 文件 格式 中 的 图 像 的 方向 不 同 ， 在 那些 图 像 中 原点 位 于 左上 角 。 我 
们 通过 指定 SOIL_FLAG_INVERT_Y 参 数 ， 垂 直 翻 转 图 像 来 重新 定向 ， 
使 其 与 OpenGEL 的 预期 格式 相对 应 ， 融 像 我 们 在 loadTextureO) 函 数 中 对 
SOIL_load_OGL _texture() 进 行 的 调用 一 样 。 





6H ”3D 模 型 


到 目前 为 止 ， 我 们 只 处 理 了 非常 简单 的 3D 对 象 ， 例 如 立方 体 和 金 
字 塔 。 这 些 对 象 非常 人 简单， 我 们 能 够 在 源 代码 中 明确 列 出 所 有 顶点 信 
Eh, FPA RBA RX 








然而 ， 大 多 数 有 趣 的 3D 场 景 包 括 的 对 象 过 于 复杂 ， 使 得 我 们 无 法 
像 之 前 那样 继续 手工 构建 它们 。 在 本 章 中 ， 我 们 将 探索 更 复杂 的 对 象 模 
型 ， 以 及 如 何 构建 并 将 它们 加 载 到 场景 中 。 





3D 建 模 本 身 就 是 一 个 广阔 的 领域 ， 我 们 在 这 里 讲 到 的 必然 非常 有 
限 。 我 们 将 重点 关注 以 下 两 个 主题 : 


。 通过 程序 来 构建 模型 ; 
。 加 载 外 部 创建 的 模型 。 





里 然 这 只 涉及 丰富 的 3D 建 模 领 域 中 非 第 浅 层 的 部 分 ， 但 它 将 使 我 
们 能 够 在 场景 中 包含 各 种 复杂 和 荧 真 的 细 市 对 象 。 


6.1 程序 构建 模型 一 一 构建 一 个 球体 





菏 些 类 型 的 对 象 《例如 球体 、 圆 锥 体 等 ) 具有 数学 定义 ， 这 些 定义 
有 助 于 算法 生成 。 例 如 ， 对 于 半径 为 R 的 贺 ， 围 绕 其 圆周 的 点 的 坐标 可 
以 被 很 好 地 定义 ( 见 图 6.1)。 





(Rcos9, Rsin@) 








图 6.1 构成 圆周 的 点 





我 们 可 以 系统 地 使 用 圆 的 几何 知识 来 通过 算法 建立 球体 模型 。 我 们 
的 策略 如 下 。 


(1) 在 整个 球体 上 ， 选 择 表 示 一 系列 圆 形 “ 水 平 切片 ”的 精度 。 见 
图 6.2 的 左 侧 。 


(2) 将 每 个 圆 形 切片 的 圆周 细 分 为 行 干 个 点 。 见 图 6.2 的 右 侧 。 更 
多 的 点 和 水 平 切片 可 以 生成 更 精确 、 更 平滑 的 球体 模型 。 在 我 们 的 模型 
中 ， 每 个 切片 将 具有 相同 数量 的 点 。 


图 6.2 ”构建 圆 形 项 点 


(3) UR DAN = FAI. MTS ee ER TEBE 
构建 两 个 三 角形 。 例 如 ， 当 我 们 沿 着 图 6.3 中 球体 上 5 个 彩色 顶点 这 一 行 
移动 时 ， 对 于 这 5 个 项 点 中 的 每 一 个 ， 我 们 构建 了 以 相应 颜色 显示 的 两 
个 三 角形 《〈 见 彩 插 ， 下 面 将 更 详细 地 描述 这 些 步 骤 ) 。 





NINA 


图 6.3 ”将 顶点 组 合成 三 角形 


(4) 根据 纹理 图 像 的 性 质 选 择 纹理 坐标 。 在 球体 的 情况 下 ， 存 在 
许多 地 形 纹理 图 像 ， 假 设 我 们 选择 这 种 纹理 图 像 ， 想 象 一 下 ， 让 这 个 图 
像 围 绕 球 体 “ 包 右 *"， 我 们 可 以 根据 图 像 中 纹 素 的 最 终 对 应 位 置 为 每 个 顶 
点 指定 纹理 坐标 。 





(5) 对 于 每 个 顶点 ， 通 党 还 希望 生成 法 癌 量 (Normal Vector) 
一 一 年 直 于 模型 表面 的 同 量 。 我 们 将 很 快 在 第 7 章 中 将 它们 用 于 光照 。 








确定 法 问 量 可 能 很 赫 手 ， 但 是 在 球体 的 情况 下 ， 从 球体 中 心 指 同 顶 





FEY) Pe) Be Pe Se PAT AI Tl es! 图 6.4 说 明了 这 个 特点 (球体 的 中 
心 用 “ 星 形 ” 表 示 )。 


we 


图 6.4 ”球体 顶点 法 向 量 


一 些 模型 使 用 索引 定义 三 角形 。 请 注意 ， 在 图 6.3 中 ， 每 个 顶点 出 
现在 多 个 三 角形 中 ， 这 将 导致 每 个 顶点 被 多 次 指定 。 我 们 不 希望 这 样 
做 ， 而 是 会 存储 每 个 项 点 一 次 ， 然 后 为 三 角形 的 每 个 角 指定 索引 ， 引 用 
所 需 的 顶点。 我 们 需要 存储 每 个 项 点 的 位 置 、 纹 理 坐 标 和 法 向 量 ， 因 此 
这 么 做 可 以 为 大 型 模型 节省 内 存 。 











顶点 存储 在 一 维 数组 中 ， 从 最 下 面 的 水 平 切片 中 的 顶点 开始 。 使 用 
索引 时 ， 关 联 的 索引 数组 包括 每 个 三 角形 角 的 条 目 。 其 内 容 是 顶点 数组 
中 的 整 型 引用 (具体 地 说 ， 是 下 标 〉，。 假 设 每 个 切片 包含 n 个 顶点 ， 顶 
点 数组 以 及 相应 索引 数组 的 示例 部 分 ， 如 图 6.5 所 示 。 


Jtvertex in ith slice 
slice #0 ith slice (i+1)” slice 





Leal [ne] Wl Yor [real aren riers = 


Toe pr Prepon waren] 
上 索引 数组 ~ 


triangle / triangle /+1 





图 6.5 ”顶点 数组 和 相应 的 索引 数组 


然后 ， 我 们 可 以 从 球体 底部 开始 ， 围 绕 每 个 水 平 切 厂 以 圆 形 方式 裔 
历 顶 点 。 当 我 们 访问 每 个 顶点 时 ， 我 们 构建 两 个 三 角形 ， 在 其 右上 方形 
成 一 个 方形 区 域 ， 如 图 6.3 所 示 。 我 们 将 整个 处 理 过程 组 织 成 藤 套 循 
环 ， 如 下 所 示 。 


对 于 球体 中 的 每 个 水 平 切片 (i 的 取 值 从 6 到 球体 中 的 所 有 切片 ) 
{ 对 于 切片 i 中 的 每 个 顶点 j G 的 取 值 从 @ 到 切片 中 的 所 有 顶点 ) 








{ 计算 顶点 j 的 指向 右边 相 邻 顶 点 、 上 方 顶 点 ， 以 及 右上 方 顶 点 的 两 个 三 角形 的 索引 
} } 








例如 ， 考 虑 图 6.3 中 的 “红色 ”顶点 (图 6.6 中 重复 出 现 ) 。 这 个 顶点 
位 于 图 6.6 所 示 的 黄色 三 角形 的 左下 方 ， 按 照 我 们 刚刚 描述 的 循环 ， 它 
的 索引 序号 是 rn+tj， 其 中 i 是 当前 正在 处 理 的 切片 (外 循环 ) ，j 是 当前 
正在 该 切片 中 处 理 的 顶点 (内 循环 ) ，n 是 每 个 切片 的 顶点 数 。 图 6.6 显 
示 了 这 个 顶点 (红色 )〉 以 及 它 的 3 个 相关 的 相 邻 顶点 〈 见 彩 插 ) ， 每 个 
顶点 都 有 公式 显示 它们 的 索引 序号 。 








vertex[(i+1)*n+j] ~ vertex[(i+1)*n+tj+1] 
‘Ne "4 
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vertex[i*n+j] vertex[i*n+j+1] 


图 6.6 第 i 个 切片 中 的 第 个 顶点 的 索引 序号 (n= 每 个 切片 的 项 点 数 ) 


然后 使 用 这 4 个 顶点 构建 为 此 (红色 ) 顶点 生成 的 两 个 三 角形 (以 
黄色 显示 ) 。 这 两 个 三 角形 的 索引 表 中 的 6 个 条 目 在 图 中 以 数字 1 一 6 的 
顺序 表示 。 注 意 ， 条 目 3 和 6 都 指向 相同 的 项 点 ， 对 于 条 目 2 和 4 也 是 如 
It A T seen Aa o 时 由 此 定义 
的 两 个 三 角形 是 由 这 6 个 顶点 构成 的 一 一 其 中 一 个 三 角形 的 条 目标 记 为 
1、2、3， 引 用 的 顶 ee an 
VerteX[(i+1)*mn+h 门 ; 另 一 个 三 角形 的 条 目标 记 为 4、5、6， 引 用 的 顶点 包 


fiivertex[i*nt+j+1]. vertex[(i+1)*n+j+1]#lvertex[(i+1)*n+j]. 


程序 6.1 显 示 了 我 们 的 球体 模型 的 实现 ， 类 名 为 Sphere。 生 成 的 球体 
的 中 心 位 于 原点 。 这 里 还 显示 了 使 用 Sphere 的 代码 。 请 注意 ， 每 个 顶点 
都 存储 在 包含 GLM 类 vec2 和 vec3 实 例 的 C++ 回 量 中 《这 与 之 前 的 示例 不 
同 ， 之 前 顶点 存储 在 浮 点 数组 中 ) 。vec2 和 vec3 包 括 了 获得 所 需 的 x、y 
和 z 分 量 浮 点 值 的 方法 ， 然 后 就 可 以 如 前 所 述 将 它们 放 入 浮 点 缓冲 区 。 
我 们 将 这 些 值 存储 在 可 变 长 上 度 C++ 同 量 中 ， 因 为 长 度 取决 于 运行 时 指定 
的 切片 数 。 














请 注意 Sphere 类 中 三 角形 索引 的 计算 ， 如 前 面 的 图 6.6 所 述 。 变 


量 “prec(precision)” 指 的 是 “精度 ”， 在 这 里 它 被 用 来 确定 球形 切片 的 数量 
和 每 个 切记 中 的 顶点 数量 。 因 为 纹理 贴图 完全 包 庄 在 球体 周围 ， 所 以 在 
纹理 贴图 的 左右 边缘 相交 的 每 个 点 处 需要 一 个 额外 的 重合 顶点 。 因 此， 
顶点 的 总 数 是 (prec+1)*(prec+1)。 由 于 每 个 顶点 生成 6 个 三 角形 索引 ， 
此 索引 的 总 数 是 prec*prec*6。 








程序 6.1 程序 生成 的 球体 








球体 类 (Sphere. cpp) 


#include <cmath> 
#include <vector> 
#include <iostream> 
#include <glm\glm.hpp> 
#include "Sphere.h" 
using namespace std; 


Sphere::Sphere() { 
init (48); 
} 


Sphere::Sphere(int prec) { // prec 是 精度 ， 也 就 是 切片 的 数量 
init(prec); 


} 








float Sphere::toRadians(float degrees) { return (degrees * 2.0f * 3.14159f 
) / 360.0f; } 


void Sphere: :init(int prec) { 

numVertices = (prec + 1) * (prec + 1); 

numIndices = prec * prec * 6; 

// std::vector::push_back() 在 问 量 的 末尾 增加 一 个 新 元 素 ， 并 为 同 量 长 度 加 1 

for (int i = @; i < numVertices; i++) { vertices.push_back(glm::vec3()); 

} 

for (int i = @; i < numVertices; i++) { texCoords.push_back(glm::vec2()) 
; } 

for (int i = @; i < numVertices; i++) { normals.push_back(glm::vec3()); 
} 


for (int i = @; i < numIndices; i++) { indices.push_back(@); } 


























// 计算 三 角形 顶点 











for (int i = ð; i <= prec; i++) { 
for (int j = 0; j <= prec; j++) { 


float y = (float)cos(toRadians(180.0f - i * 180.0f / prec)); 

float x = -(float)cos(toRadians(j*360.0f / prec)) * (float)abs(c 
os(asin(y))); 

float z = (float)sin(toRadians(j*360.@f / prec)) * (float)abs(co 
s(asin(y))); 


vertices[i*(prec + 1) + j] = glm::vec3(x, y, z); 

texCoords[i*(prec + 1) + j] = glm::vec2(((float)j / prec), ((flo 
at)i / prec)); 

normals[i*(prec + 1) + j] = glm::vec3(x,y,Z); 




















} 
} 
// 计算 三 角形 索引 
for (int i = ð; i<prec; i++) { 
for (int j = ©; j<prec; j++) { 
indices[6 * (i*prec + j) + @] = i*(prec + 1) + j; 
indices[6 * (i*prec + j) + 1] = i*(prec + 1) + j + 1; 
indices[6 * (i*prec + j) + 2] = (i + 1)*(prec + 1) + j; 
indices[6 * (i*prec + j) + 3] = i*(prec + 1) + j + 1; 
indices[6 * (i*prec + j) + 4] = (i + 1)*(prec + 1) + j + 1; 
indices[6 * (i*prec + j) + 5] = (i + 1)*(prec + 1) + j; 
} 
} 
} 
// 读 取 函数 
int Sphere::getNumVertices() { return numVertices; } 
int Sphere::getNumIndices() { return numIndices; } 
std: :vector<int> Sphere: :getIndices() { return indices; } 
std: :vector<glm::vec3> Sphere::getVertices() { return vertices; } 
std: :vector<glm::vec2> Sphere::getTexCoords() { return texCoords; } 
std: :vector<glm: :vec3> Sphere::getNormals() { return normals; } 


球体 头 文件 (Sphere.h) 


#include <cmath> 
#include <vector> 
#include <gim\glm.hpp> 


class Sphere 

{ 

private: 
int numVertices; 
int numIndices; 


std::vector<int> indices; 


std 
std 
std 


: :Vector<glm: : 
: :Vector<glm: : 
: :Vector<glm: : 


void init(int); 
float toRadians(float degrees); 





vec3> vertices; 
vec2> texCoords; 
vec3> normals; 


public: 
Sphere(int prec); 
int getNumVertices() ; 
int getNumIndices(); 
std::vector<int> getIndices(); 
std: :vector<glm::vec3> getVertices(); 
std: :vector<glm::vec2> getTexCoords(); 
std: :vector<glm::vec3> getNormals() ; 
}; 
使 用 球体 类 

















#include "Sphere.h" 


Sphere 


mySphere(48) ; 


void setupVertices(void) { 


std: 
std: 
std: 
std: 


std: 
std: 
std: 


int 
for 


:vector<int> 


ind = mySphere.getIndices(); 




















:Vector<glm: :vec3> vert = mySphere.getVertices(); 
:vector<glm::vec2> tex = mySphere.getTexCoords(); 
:Vector<glm: :vec3> norm = mySphere.getNormals(); 
:vector<float> pvalues; // 顶点 位 置 
:vector<float> tvalues; // 纹理 坐标 
:vector<float> nvalues; // 法 问 量 

numIndices = mySphere.getNumIndices(); 


(int i = 0; i < numIndices; i++) { 


pvalues.push _ 
pvalues.push __ 
pvalues.push__ 


tvalues.push_ 
tvalues.push_ 


nvalues.push __ 
nvalues.push __ 
nvalues.push __ 


back((vert[ind[i]]).x); 
back((vert[ind[i]]).y)3; 
back((vert[ind[i]]).z); 


back((tex[ind[i]]).s); 
back((tex[ind[i]]).t); 


back((norm[ind[i]]).x); 
back((norm[ind[i]]).y)3; 
back((norm[ind[i]]).z); 


glGenVertexArrays(1, vao); 
glBindVertexArray(vao[@]); 
glGenBuffers(3, vbo); 


// 把 顶点 放 入 缓冲 区 #0 

glBindBuffer(GL ARRAY_ BUFFER, vbo[@]); 

glBufferData(GL ARRAY BUFFER, pvalues.size()*4, &pvalues[@], GL_STATIC_ 
DRAW) ; 

















// 把 纹理 坐标 放 入 缓冲 区 #1 

glBindBuffer(GL ARRAY_ BUFFER, vbo[1]); 

glBufferData(GL ARRAY BUFFER, tvalues.size()*4, &tvalues[@], GL_STATIC_ 
DRAW) ; 











// 把 法 向 量 放 入 缓冲 区 #2 

glBindBuffer(GL_ARRAY_BUFFER, vbo[2]); 

glBufferData(GL ARRAY BUFFER, nvalues.size()*4, &nvalues[@], GL_STATIC_ 
DRAW) ; 


} 


fEdisplay()! 

















glDrawArrays(GL_TRIANGLES, ©, mySphere.getNumIndices()); 





使 用 Sphere 类 时 ， 每 个 顶点 位 置 和 法 同 量 需要 3 个 值 ， 但 每 个 纹理 
坐标 只 需要 两 个 值 。 这 反映 在 Sphere.h 文 件 中 显示 的 向 量 〈vertices、 
texCoords 和 normals〉 的 声明 中 ， 稍 后 数据 从 这 些 同 量 中 加 载 到 绥 冲 区 
Hs 














值得 注意 的 是 ， 虽 然 在 构建 球体 的 过 程 中 使 用 了 索引 ， 但 存储 在 
VBO 中 的 最 终 球体 顶点 净 。 相 反 ， 当 setupVertices() 循 环 
裔 历 球体 索引 时 ， 它 会 在 VBO 中 为 每 个 索引 条 目 生 成 单独 的 (通常 是 见 
余 的 ) 顶点 条 上 日 。OpenGL 确 实 有 一 种 索引 顶点 数据 的 机 制 ， 为 简单 起 
见 ， 我 们 在 此 示例 中 没有 使 用 它 ， 但 我 们 将 在 下 一 个 示例 中 使 用 














~ 

















ZAIN 


从 几何 形状 到 现实 世界 的 物体 ， 使 用 程序 的 方式 可 以 创建 许多 其 他 
的 模型 。 其 中 最 著名 的 一 个 是 “犹他 茶壶 ”LCH1 昌 ， 在 1975 年 由 马丁 : AE 
尔 (Martin Newell) 开发， 使 用 各 种 贝 罕 尔 曲线 和 曲面 。OpenGL 
Utility Toolkit (或 ‘GLUT”)〉 [SL16] 甚 至 包括 了 绘制 茶壶 的 程序 ( 见 图 
6.7) 。 我 们 在 本 书 中 没有 涉及 GLUT， 但 贝 塞 尔 曲面 将 在 第 11 章 中 介 
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6.7 OpenGL GLUT 


构建 一 个 环 面 





6.2 ” OpenGL 索引 


6.2.1 环 面 


用 于 产生 环 面 的 算法 可 以 在 各 种 网 站 上 找到 。Paul Baker 逐 步 描述 
了 定义 圆 形 切片 ， 然 后 围绕 圆圈 旋转 切片 以 形成 环 面 的 方法 EE0J。 图 
6.8 显 示 了 侧面 和 上 面 的 两 种 视图 。 














图 6.8 构建 一 个 环 面 




















生成 环 面 顶点 位 置 的 方式 与 构建 球体 的 方式 有 很 大 不 同 。 对 于 环 
面 ， 算 法 将 一 个 顶点 定位 到 原点 的 右 侧 ， 然 后 在 XY 平面 上 的 圆 中 让 这 个 
顶点 围绕 Z 轴 旋转 ， 以 形成 < 环 ”。 然 后 ， 将 这 个 环 * 向 外 ”移动 “内 半 
径 ” 那 么 长 的 距离 。 在 构建 这 些 顶 点 时 ， 为 每 个 项 点 计算 纹理 坐标 和 法 
器 量 。 还 会 额外 为 每 个 顶点 生成 与 环 面 表面 相 切 的 向 量 ( 称 为 切 问 





val 


围 经 Y 轴 旋转 最 初 的 这 个 环 ， 形 成 用 来 构成 环 面 的 其 他 环 的 顶点 。 
通过 围绕 Y 轴 旋转 最 初 的 环 的 切 同 量 和 法 向 量 来 计算 每 个 结果 顶点 的 切 
加 量 和 法 向 量 。 在 顶点 创 建 之 后 ， 逐 个 环 地 表 历 所 有 顶点 ， 并 且 对 于 每 
个 项 反 生 成 两 个 三 角形 。 两 个 三 角形 的 六 个 案 引 表 条 目的 生成 方式 和 之 
前 的 球体 类 似 。 


我 们 为 剩余 的 环 选择 纹理 坐标 的 策略 ， 是 将 它们 排列 成 使 得 纹理 图 
像 的 S 轴 环绕 环 面 的 水 平 周 边 的 一 半 ， 然 后 再 对 男 一 半 重 复 。 当 我 们 绕 Y 
轴 旋 转生 成 环 时 ， 我 们 指定 一 个 从 1 开始 并 增加 到 指定 精度 的 变量 环 
《再 次 称 为 "prec") 。 然 后 我 们 将 5 纹 理 坐 标 值 设置 为 ring*2.0/prec， 使 S 














的 取 值 范围 介 于 0.0 和 2.0 之 间 ， 然 后 每 当 纹理 坐标 大 于 1.0 时 减 去 1.0。 这 
种 方法 的 动机 是 避免 纹理 图 像 在 水 平方 向 上 过 度 “ 拉 伸 ”。 反 之 ， 如 果 我 
们 确实 希望 纹理 完全 围绕 环 面 拉 伸 ， 我 们 只 须 从 纹理 坐标 计算 中 删 

除 “*2.0” 乘 数 即 可 。 








在 C++/OpenGL 中 构建 Torus 类 可 以 用 与 Sphere 类 几乎 完全 相同 的 方 
式 完成 。 但 是 ， 我 们 有 机 会 利用 OpenGL 对 顶点 索引 的 支持 来 利用 我 们 
在 构建 环 面 时 创建 的 索引 《我 们 也 可 以 为 球体 做 到 这 一 点 ， 但 我 们 没有 
这 样 做 ) 。 对 于 具有 数 干 个 顶点 的 超大 型 模型 ， 使 用 OpenGL 索 引 可 以 
提高 性 能 ， 因 此 我 们 将 描述 如 何 执行 此 操作 。 


6.2.2 ”OpenGL 中 的 索引 


在 我 们 的 球体 和 环 面 模型 中 ， 我 们 生成 一 个 引用 顶点 数组 的 整 型 过 
引 数 组 。 在 球体 的 情况 下 ， 我 们 使 用 索引 列表 来 构建 一 组 完整 的 单个 项 
扩 ， 并 将 它们 加 载 到 VBO 中 ， 残 像 我 们 在 前 面 草 节 的 示例 中 所 做 的 那 
样 。 实 例 化 环 面 并 将 其 顶点 、 法 问 量 等 加 载 到 缓冲 区 中 可 以 采用 与 程序 
6.1 中 类 似 的 方式 完成 ， 但 我 们 将 使 用 OpenGEL 的 索引 。 











使 用 OpenGL 索 引 时 ， 我 们 还 需要 将 索引 本 吴 加 载 到 VBO 中 。 我 们 
生成 一 个 额外 的 VBO 用 于 保存 索引 。 由 于 每 个 索引 值 只 是 一 个 整 型 引 
用 ， 我 们 首先 将 索引 数组 复制 到 整 型 的 C++ 癌 量 中 ， 然 后 使 用 
gBufferData0 将 癌 量 加 载 到 新 增 的 VBO 中 ， 指 定 VBO 的 类 型 为 
GL_ELEMENT_ARRAY_BUFFER 〈 这 会 告诉 OpenGL 这 个 VBO 包 含 索 





引 ) 。 执 行 此 操作 的 代码 可 以 添加 到 setupVertices(): 





std: :vector<int> ind = myTorus.getIndices(); // 环 面 索引 的 读 取 函数 返 
整 型 问 量 类 型 的 索引 





glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vbo[3]); // vbo #3 是 新 增 的 VBO 
glBufferData(GL_ELEMENT_ARRAY BUFFER, ind.size()*4, &ind[@], GL_STATIC_DRA 
W); 





ÆdispayQ AF, RiT glDrawArrays() Va H PRA 
glDrawElementsO) 调 用 ， 它 告诉 OpenGL 利 用 索引 VBO 来 查找 要 绘制 的 项 
点 。 我 们 还 使 用 glBindBuffer() 启 用 包含 索引 的 VBO， 指 定 哪 个 VBO 包 
含 索引 并 且 是 GL_ELEMENT_ARRAY_BUFFER 类 型 。 代 码 如 下 : 





numTorusIndices = myTorus.getNumIndices(); 


glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vbo[3]); 
glDrawElements(GL TRIANGLES, numTorusIndices, GL_UNSIGNED_INT, @); 





有 趣 的 是 ， 即 使 我 们 在 C++/OpenGL 应 用 程序 中 进行 了 更 改 ， 实 现 
了 索引 ， 用 于 绘制 球体 的 着 色 器 对 于 环 面 来 说 仍然 可 以 继续 工作 ， 不 需 
要 修改 。OpenGL 能 够 识别 GL_ELEMENT_ARRAY_BUFFER 的 存在 并 
利用 它 来 访问 顶点 属性 。 


程序 6.2 显 示 了 一 个 基于 Baker 实 现 的 名 为 Torus 的 类 。“ 内 ”和 “外 ” 变 
量 指 的 是 图 6.9 中 相应 的 内 半径 和 外 半径 。prec 变 量具 有 与 球体 类 似 的 作 
用 ， 对 顶点 数量 和 索引 数量 进行 类 似 的 计算 。 相 比 之 下 ， 确 定 法 向 量 比 
使 用 球体 复杂 得 多 。 我 们 使 用 了 Baker 描 述 中 给 出 的 策略 ， 其 中 计算 了 
两 个 切 问 量 〈(Baker 称 为 sSTangent 和 tTangent， 尺 管 通常 称 为 “ 切 问 量 

(tangent) ”和 和 “ 副 切 向 量 Cbitangent) ”) ， 它 们 的 又 乘积 形成 法 癌 量 。 











在 本 书 的 其 余部 分 中 ， 我 们 将 在 许多 示例 中 使 用 此 环 面 类 《以 及 前 
面 描述 的 球体 类 ) 。 





— 
oH 


星 序 6.2” 程序 生成 的 环 面 











Torus 类 (Torus.cpp) 


#include <cmath> 
#include <vector> 
#include <iostream> 
#include "Torus.h" 
using namespace std; 


Torus::Torus() { 
prec = 48; 
inner = 0.5f; 
outer = 0.2f; 
init(); 

} 


Torus::Torus(float innerRadius, float outerRadius, int precIn) { 
prec = precIn; 
inner = innerRadius; 
outer = outerRadius; 
init(); 
} 


float Torus::toRadians(float degrees) { return (degrees * 2.0f * 3.14159Ff) 
/ 360.0f; } 


void Torus::init() { 

numVertices = (prec + 1) * (prec + 1); 

numIndices = prec * prec * 6; 

for (int i = ð; i < numVertices; i++) { vertices.push_back(glm: :vec3()) 
> } 

for (int i = ð; i < numVertices; i++) { texCoords.push_back(glm::vec2() 
); } 


for (int i = ð; i < numVertices; i++) { normals.push_back(glm::vec3()); 
for (int i = ð; i < numVertices; i++) { sTangents.push_back(glm::vec3() 
for (int i = ð; i < numVertices; i++) { tTangents.push_back(glm::vec3() 


for (int i = @; i < numIndices; i++) { indices.push_back(@); } 


// 计算 第 一 个 环 
for (int i = ð; i < prec + 1; i++) { 
float amt = toRadians(i*360.@f / prec); 
// 绕 原 点 旋转 点 ， 形 成 环 ， 然 后 将 它们 向 外 移动 
glm: :mat4 rMat = glm::rotate(glm::mat4(1.0f), amt, glm::vec3(0.0f, 
Q@.0f, 1.0f)); 
glm: :vec3 initPos(rMat * glm::vec4(outer, 0.0f, 8.6f, 1.0f)); 
vertices[i] = glm::vec3(initPos + glm::vec3(inner, 868.6f, 0.0f)); 
































// 为 环 上 的 每 个 顶点 计算 纹理 坐标 
texCoords[i] = glm::vec2(6.6f，((float)i / (float)prec)); 



































// 计算 切 向 量 和 法 向 量 ， 第 一 个 切 向 量 是 绕 Z 轴 旋转 的 Y 轴 
rMat = glm::rotate(glm::mat4(1.0f), amt, glm::vec3(@.0f, @.0f, 1.0 

















f)); 


) ; 
sTangents[i] = glm::vec3(glm::vec3(0.0f, 868.6f, -1.0f)); // 第 二 
个 切 向 量 是 -z 轴 
normals[i] = glm::cross(tTangents[i], sTangents[i]); // 它们 
的 又 乘积 就 是 法 向 量 
} 


// 绕 Y 轴 旋转 最 初 的 那个 环 ， 形 成 其 他 的 环 
for (int ring = 1; ring < prec + 1; ring++) { 
for (int vert = @; vert < prec + 1; vert++) { 


tTangents[i] = glm::vec3(rMat * glm::vec4(@.0f, -1.0f, @.0f, 1.0f) 


























Mmf 


















































// 绕 Y 轴 旋转 最 初 那个 环 的 顶点 坐标 

float amt = (float)( toRadians(ring * 360.0f / prec) ) 

glm::mat4 rMat = glm::rotate(glm::mat4(1.0f), amt, glm::vec3(0.0f, 
1.0f, @.0f)); 

vertices[ring*(prec + 1) + i] = glm::vec3(rMat * glm::vec4(vertice 
s[i], 1.0f)); 











// 计算 新 环 顶 点 的 纹理 坐标 
texCoords[ring*(prec + 1) + vert] = glm::vec2((float)ring*2.0f / ( 
float)prec, texCoords 
[vert].t); 
if (texCoords[ring*(prec + 1) + i].s > 1.0) texCoords[ring*(prec+1 
ì+i].s -= 1.0Ff; 

















// 绕 Y 轴 旋转 切 向 量 和 副 切 向 量 
rMat = glm::rotate(glm::mat4(1.0f), amt, glm::vec3(@.0f, 1.0f, 0.0 

















f)); 
sTangents[ring*(prec + 1) + i] = glm::vec3(rMat * glm::vec4(sTange 
nts[i], 1.0f)); 


rMat = 
.OF)); 


glm::rotate(glm::mat4(1.0f), amt, glm::vec3(@.0f, 1.0f, © 


tTangents[ring*(prec + 1) + i] = glm::vec3(rMat * glm::vec4(tTan 


gents[i], 1.0f)); 








旋转 法 向 量 











// BNA 
rMat = 
.of) ) ; 
normals 
s[i], 1.ef)); 
} 3} 


glm::rotate(glm::mat4(1.0f), amt, glm::vec3(@.0f, 1.0f, © 


[ring*(prec + 1) + i] = glm::vec3(rMat * glm::vec4(normal 








// 按照 逐个 项 点 的 两 个 三 角形 ， 计 算 三 角形 索引 


for (int ring = 
for (int ve 


indices 
rt; 

indices 
) + vert; 

indices 
rt + 1; 

indices 
+ vert + 1; 

indices 
+ 1) + vert; 


indices 
+ 1) + vert + 1; 


} }} 


// WE 
































ð; ring < prec; ring++) { 
rt = @; vert < prec; vert++) { 
[((ring*prec + vert) * 2) * 3 + 0] = ring*(prec + 1) + ve 


[((ring*prec + vert) * 2) * 3 + 1] (ring + 1)*(prec + 1 


[((ring*prec + vert) * 2) * 3 + 2] 


ring*(prec + 1) + ve 
[((ring*prec + vert) * 2 + 1) * 3 + 0] = ring*(prec + 1) 


[((ring*prec + vert) * 2 + 1) * 3 + 1] 


(ring + 1)*(prec 


[((ring*prec + vert) * 2 + 1) * 3 + 2] (ring + 1)*(prec 


1 索引 和 顶点 的 访问 函数 


int Torus::getNumVertices() { return numVertices; } 


int Torus: :getNum 
std: :vector<int> 
std: :Vector<glLm: 
std: :Vector<glLm: 
std: :vector<gl1m: 
std: :Vector<glLm: 
std: :Vector<glm: : 


环 面 头 文件 (Torus. 





#include <cmath> 
#include <vector> 


Indices() { return numIndices; } 
Torus: :getIndices() { return indices; } 


:vec3> Torus::getVertices() { return vertices; } 
:vec2> Torus::getTexCoords() { return texCoords; } 
:vec3> Torus::getNormals() { return normals; } 
:vec3> Torus::getStangents() { return sTangents; } 


vec3> Torus::getTtangents() { return tTangents; } 


h) 


#include <gim\glm.hpp> 


class Torus 


{ 


private: 


int numVertices; 

int numIndices; 

int prec; 

float inner; 

float outer; 

std::vector<int> indices; 
std::vector<glm::vec3> vertices; 
std: :vector<glm::vec2> texCoords; 
std: :vector<glm::vec3> normals; 
std: :vector<glm::vec3> sTangents; 
std::vector<glm::vec3> tTangents; 
void init(); 

float toRadians(float degrees); 


public: 
Torus(); 
Torus(float innerRadius, float outerRadius, int prec); 
int getNumVertices(); 
int getNumIndices(); 
std::vector<int> getIndices(); 
std: :vector<glm::vec3> getVertices(); 
std: :vector<glm::vec2> getTexCoords() ; 
std: :vector<glm::vec3> getNormals(); 
std: :vector<glm::vec3> getStangents(); 
std: :vector<glm::vec3> getTtangents() ; 


}; 


使 用 Torus 类 (用 OpenGL 索引 ) 























#include "Torus.h" 
Torus myTorus(@.5f, @.2f, 48); 


void setupVertices(void) { 
std::vector<int> ind = myTorus.getIndices(); 
std: :vector<glm::vec3> vert = myTorus.getVertices(); 
std: :vector<glm::vec2> tex = myTorus.getTexCoords(); 
std: :vector<glm::vec3> norm = myTorus.getNormals(); 


std::vector<float> pvalues; 
std::vector<float> tvalues; 
std::vector<float> nvalues; 


int numVertices = myTorus.getNumVertices(); 
for (int i = @; i < numVertices; i++) { 
pvalues.push_back(vert[i].x); 


pvalues. 
pvalues. 


tvalues. 
tvalues. 


nvalues 
nvalues 
nvalues 


} 


push_back(vert[i].y); 
push_back(vert[i].z); 


push_back(tex[i].s); 
push_back(tex[i].t); 


.push_back(norm[i].x); 
.push_back(norm[i].y); 
.push_back(norm[i].z); 


glGenVertexArrays(1, vao); 
glBindVertexArray(vao[@]); 


























glGenBuffers(4, vbo); // 像 以 前 一 样 生 成 VB0， 并 新 增 一 个 用 于 索引 

glBindBuffer(GL ARRAY BUFFER, vbo[@]); // MAME 

glBufferData(GL ARRAY BUFFER, pvalues.size() * 4, &pvalues[@], GL_STATI 
C_DRAW); 

glBindBuffer(GL_ARRAY_BUFFER, vbo[1]); // 纹理 坐标 

glBufferData(GL ARRAY BUFFER, tvalues.size() * 4, &tvalues[@], GL_STATI 
C_DRAW); 

glBindBuffer(GL_ARRAY_BUFFER, vbo[2]); // YA 


glBufferData(GL_ARRAY_BUFFER, nvalues.size() * 4, &nvalues[@], GL_STATI 


C_DRAW); 


glBindBuffer(GL_ELEMENT_ARRAY_ BUFFER, vbo[3]); // 索引 
glBufferData(GL_ELEMENT ARRAY BUFFER, ind.size() * 4, &ind[@], GL_STATI 


C_DRAW); 
} 


fEdisplay()4 


au 





g1BindBuffer (GL_ 


ELEMENT_ARRAY_BUFFER, vbo[3]); 


glDrawElements(GL_TRIANGLES, myTorus.getNumIndices(), GL_UNSIGNED_INT, 0); 





请 注意 ， 在 使 用 Torus 类 的 代码 中 ，setupVerticesO 中 的 循环 现在 只 
存储 一 次 与 每 个 顶点 关联 的 数据 ， 而 不 是 每 个 索引 条 目 存储 一 次 〈 如 球 
体 示 例 中 的 情况 ) 。 这 种 差异 也 反映 在 要 输入 VBO 的 数据 的 数组 声明 大 











小 中 。 男 请 注意 ， 在 坏 面 示例 中 ， 不 是 在 检索 顶点 数据 时 使 用 索引 值 ， 


而 是 直接 将 它们 简单 地 加 载 到 VBO #3 中 。 由 于 此 VBO 被 指定 为 
GL_ELEMENT_ARRAY_BUFFER，OpenGL 知 道 该 VBO 包 含 顶点 索 
Fle 


图 6.9 显 示 了 实例 化 环 面 并 使 用 砖 纹 理 对 其 进行 纹理 化 的 结 





图 6.9 程序 生成 的 环 面 


6.3 加载 外 部 构建 的 模型 


复杂 的 3D 模 型 ， 例 如 在 视频 游戏 或 计算 机 生成 的 电影 中 的 人 物 角 
色 ， 通 常 使 用 建 模 工 具 生 成 。 这 种 *DCC” (数字 内 容 创建 ) 工具 使 人 们 
《例如 艺术 家 ) 能 够 在 3D 空 间 中 构建 任意 形状 并 自动 生成 顶点、 纹理 
坐标 、 顶 点 法 问 量 等 。 有 太 多 这 样 的 工具 ， 此 处 无 法 一 一 列 出 ， 有 几 个 
例子 是 MAYA、Blender、Lightwave、Cinema4D 等 。Blender 是 免费 和 开 
源 的 。 图 6.10 显 示 了 编辑 3D 模 型 时 的 Blender 屏 幕 示 例 。 








图 6.10 “Blender 模型 创建 示例 LBLI16] 


为 了 让 我 们 在 OpenGL 场 景 中 使 用 DCC 工 具 创 建 的 模型 ， 需 要 以 我 
们 可 以 读 取 《〈 导 入 ) 到 我 们 程序 中 的 格式 保存 〈 导 出 ) 该 模型 。 有 好 几 
种 标准 的 3D 模 型 文件 格式 ;再 次 说 明 ， 有 太 多 无 法 一 一 列 出 ， 有 一 些 
例子 是 Wavefront (.obj) ~ 3D Studio Max (.3ds) 、 斯 坦 福 扫描 存储 库 
(ply) ~ Ogre3D (.mesh) ， 供 参考 。 其 中 最 简单 的 是 wavefront〈 通 
第 被 称 为 OBJ) ， 所 以 我 们 将 仔细 讲解 它 。 


OBJ 文 件 很 简单 ， 我 们 可 以 相对 容易 地 开发 一 个 基本 的 导入 需 。 在 
OBJ 文 件 中 ， 通 过 文本 行 的 形式 指定 顶点 几何 数据 、 纹 理 坐 标 、 法 问 量 
和 其 他 信息 。 它 有 一 些 限 制 一 一 例如 ，OBJ 文 件 无 法 指定 模型 动画 。 


OBJ 文 件 中 的 行 ， 以 字符 标记 开头 ， 表 示 该 行 上 的 数据 类 型 。 一 些 
常见 的 标签 包括 : 


e v-JL (顶点 位 置 ) 数据 ; 

e Vt- 纹 理 坐 标 ; 

e Vn- 顶点 法 问 量 ; 

。f- 面 (通常 是 三 角形 中 的 顶点 ) 。 





还 有 其 他 标签 可 以 用 来 存储 对 象 名 称 、 使 用 的 材质 、 曲 线 、 阴 影 和 
许多 其 他 细节 。 我 们 这 里 只 讨论 上 面 列 出 的 4 个 标签 ， 这 些 标签 足以 导 
入 各 种 复杂 模型 。 


假设 我 们 使 用 Blender 构 建 一 个 简单 的 金字 塔 ， 例 如 我 们 为 程序 4.3 
开发 的 金字 塔 。 图 6.11 是 在 Blender 中 创建 的 类 似 的 金字 塔 的 屏幕 截图 。 
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图 6.11 在 Blender 中 构建 的 金字 塔 


在 Blender 中 ， 如 果 我 们 现在 导出 我 们 的 金字 塔 模 型 ， 指 定 .obj 格 


式 ， 并 设置 Blender 输 出 纹理 坐标 和 顶点 法 向 量 ， 则 会 创建 一 个 包含 所 有 
这 些 信息 的 OBJ 文 件 。 生 成 的 OBJ 文 件 如 图 6.12 所 示 。 纹理 坐标 的 实 





际 值 可 能 因 模 型 的 构建 方式 而 异 。) 


Pyramid 


-1.000000 
-1.000000 
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Blender v2.70 (sub 0) OBJ File: '' 
www.blender.org 


1.000000 -1.000000 -1.000000 
1.000000 -1.000000 1.000000 


-1.000000 1.000000 
-1.000000 -1.000000 


0.000000 1.000000 0.000000 


0.258220 
0.750612 
0.750612 
0.790246 
0.388210 
0.991264 
0.988689 
0.742493 
0.496298 
0.250102 
0.003906 
0.000000 
0.603054 
0.402036 
0.258220 
-1.000000 0.000000 
0.447214 0.000000 


-0.000000 0.447214 0.894427 
-0.894427 0.447214 -0.000000 


0.447214 -0.894427 


2/1/1 3/2/1 4/3/1 
1/4/2 5/5/2 2/6/2 
271/3 5/8/3 3/9/73 
3/9/4 5/10/4 4/11/4 
5/12/5 1/13/5 4/14/5 
1/15/1 2/1/1 4/3/1 


图 6.12 ”金字 塔 导出 的 OBJ 文 件 


我 们 对 OBJ 文 件 的 重要 部 分 进行 了 颜色 标记 以 供 参考 。 顶 部 以 “ 扩 开 
头 的 行 是 由 Blender 放 置 的 注释 ， 我 们 的 导入 器 忽略 了 这 些 注释 。 接 下 来 


是 以 “o" 开 头 的 行 ， 给 出 对 象 的 名 称 。 我 们 的 导入 器 也 可 以 忽略 这 一 
行 。 之 后 ， 有 一 行 以 *s "开头 ， 指 定 表面 不 应 该 被 平 请 。 我 们 的 代码 也 
会 忽略 以 “$” 开 头 的 行 。 





OBJ 文 件 中 的 第 一 部 分 有 实际 内 容 的 行 是 以 “vw* 开 头 的 那些 〈 第 4 行 
一 第 8 行 ) 。 它 们 指定 金字 塔 模型 的 5 个 顶点 相对 于 原点 的 X、Y 和 2Z 局 部 
空间 坐标 。 在 这 里 ， 原 点 位 于 金字 塔 的 中 心 。 


AERE AVRA) 是 各 种 纹理 坐标 。 纹 理 坐 标 列 表 比 顶点 列 
表 长 的 原因 是 一 些 顶 点 参与 多 个 三 角形 ， 并 且 在 这 些 情况 下 可 能 使 用 不 
同 的 纹理 坐标 。 





绿色 的 值 《 以 “vn? 开 头 ) 是 各 种 法 向 量 。 该 列表 通常 也 比 顶 点 列表 
长 《尽管 在 该 示例 中 不 是 这 样 ) ， 同 样 是 因为 一 些 顶 点 参与 多 个 三 角 
形 ， 并 且 在 那些 情况 下 可 能 使 用 不 同 的 法 向量 。 


在 文件 底部 附近 标记 为 紫色 的 值 ( 以 “f»* 开 头 〉 指 定 三 角形 
《 即 “ 面 *?)。 在 此 示例 中 ， 每 个 面 ( 三 角形 〉 具 有 3 个 元 素 ， 每 个 元 素 
具有 由 “分 隅 的 3 个 值 (OBJ 也 允许 其 他 格式 ) 。 每 个 元 系 的 值 分 别 是 
顶点 列表 、 纹 理 坐 标 和 法 向 量 的 索引 。 例 如 ， 第 三 个 面 是 : 








f2/7/3 5/8/3 3/9/3 


这 表明 顶点 列表 中 的 第 2 个 、 第 5 个 和 第 3 个 顶点 ( 蓝 色 ) 组 成 了 一 
个 三 角形 《请 注意 OBJ 索 引 从 1 开始 ) 。 相 应 的 纹理 坐标 是 红色 部 分 中 
纹理 坐标 列表 中 的 第 7 项 、 第 8 项 和 第 9 项 。 所 有 3 个 顶点 都 具有 相同 的 法 








向 量 ， 也 就 是 以 绿色 显示 的 法 向 量 列表 中 的 第 3 项 。 











OBJ 格 式 的 模型 并 不 要 求 具 有 法 问 量 ， 甚 至 纹理 坐标 。 如 打 模 型 没 
有 纹理 坐标 或 法 同 量 ， 则 面 的 数值 将 仅 指 定 顶 点 索引 : 


£253 
如 果 模 型 具有 纹理 坐标 ， 但 不 具有 法 回 量 ， 则 格式 如 下 : 


f2/7 5/8 3/9 





并 且 ， 如 果 模 型 具有 法 向 量 但 没有 纹理 坐标 ， 则 格式 为 : 


f2//3 5//3 3//3 





模型 具有 数 万 个 顶点 并 不 罕见 。 对 于 所 有 可 以 想象 的 应 用 场景 ， 几 
乎 都 可 以 在 互联 网 上 下 载 到 数 百 种 这 样 的 模型 ,包括 动物 、 建 筑 物 、 汽 
车 、 飞 机 、 神 话 生 物 、 人 等 。 





在 互联 网 上 可 以 获得 可 以 导入 OBJ 模 型 的 复杂 程序 各 不 相同 的 导入 
程序 。 编 写 一 个 非常 简单 的 OBJ 加 载 器 函数 也 并 不 困难 ， 它 可 以 处 理 我 
们 看 到 的 基本 标记 〈v、vt、vn 和 f) 。 程 序 6.3 显 示 了 一 个 这 样 的 加 载 
器 ， 尽 管 功能 非常 有 限 。 它 包含 一 个 类 来 保存 任意 的 导入 模型 ， 该 模型 
SC Wid FS A ato 





在 我 们 讲述 简单 OBJ 导 入 露 的 代码 之 前 ， 我 们 必须 警告 读者 其 局 限 
PE 


它 仅 文 持 包含 所 有 3 个 面 属 性 字段 的 模型 。 也 就 是 说 ， 顶 点 位 置 、 
纹理 坐标 和 法 向 量 都 必须 以 f # 抽 /# HHE 六 大 # 这 种 形式 存在 。 
材质 标签 将 被 忽略 一 一 必须 使 用 第 5 章 中 描述 的 方法 完成 纹理 化 。 
仪 支持 由 单个 三 角形 网 格 组 成 的 OBJ 模 型 “OBJ 格式 支持 复合 模 
型 ， 但 我 们 的 简单 导入 器 不 文 持 〉。 

它 假设 每 行 上 的 元 素 只 用 一 个 空格 分 隔 。 





如 果 您 的 OBJ 模 型 不 满足 上 述 所 有 条 件 ， 并 且 您 希望 使 用 程序 6.3 中 
的 简单 加 载 程序 导入 它 ， 则 可 能 仍然 可 行 。 通 常 可 以 将 这 样 的 模型 加 载 
到 Blender 中 ， 然 后 将 其 导出 到 男 一 个 满足 加 载 强 限制 条 件 的 OBJ 文 件 
中 。 例 如 ， 如 果 模 型 不 包含 法 回 量 ， 则 可 以 让 Blender 在 导出 修改 后 的 
OBJ 文 件 时 生成 法 向 量 。 








我 们 的 OBJ 加 载 右 的 另 一 个 限制 与 索引 有 关 。 在 前 面 的 描述 中 提 到 
了 “人? 标签 允许 混合 和 [匹配 顶点 位 置 、 纹 理 坐 标 和 法 向 量 的 可 能 性 。 例 
如 ， 两 个 不 同 的 “ 面 ? 行 可 以 包括 指向 相同 v 条 目 但 是 不 同 vt 条 目的 索引 。 
遗憾 的 是 ，OpenGL 的 索引 机 制 不 支持 这 种 灵活 性 一 一 OpenGL 中 的 索引 
条 目 只 能 指向 特定 的 顶点 及 其 属性 。 这 使 得 在 某 种 程度 上 编写 OBJ 模 型 
加 载 器 变 得 复杂 ， 因 为 我 们 不 能 简单 地 将 三 角形 面条 目 中 的 引用 复制 到 
索引 数组 中 。 相 反 ， 使 用 OpenGL 索 引 需 要 确保 面条 目的 v、vt 和 vn 值 的 
整个 组 合 在 索引 数组 中 都 有 自己 的 引用 。 一 种 更 简单 但 效率 更 低 的 替代 
方案 是 为 每 个 三 角形 面条 目 创建 一 个 新 顶点。 尽管 使 用 OpenGL 索 引 具 
有 市 省 空间 的 优势 (特别 是 在 加 载 较 大 模型 时 〉 ， 但 为 了 清晰 ， 我 们 选 
择 这 种 更 简单 的 方法 。 

















ModelImporter 类 包含 一 个 parseOBJO 函 数 ， 它 逐 行 读 取 OBJ 文 件 ， 


分 别处 理 v、vt、vn 和 f 这 4 种 情况 。 在 每 种 情况 下 ， 提 取 行 上 的 后 续 数 
字 ， 首 先 使 用 eraseO 跳 过 初始 的 v、vt、vn 或 {字符 ， 然 后 使 用 C++ 
stringstream 类 的 “>>” 运 算 符 提取 每 个 后 续 参 数值 ， 然 后 将 它们 存储 在 
C++ 浮 点 同 量 中 。 当 处 理 面 (f) 条 目 时 ， 使 用 C++ 浮 点 问 量 中 的 对 应 条 
目 构 建 项 点 ， 包 括 顶 点 位 置 、 纹 理 坐 标 和 法 回 量 。 











ModelImporter 类 和 ImportedModel 类 包含 在 同一 个 文件 中 ， 
ImportedModel 类 通过 将 导入 的 顶点 放 入 vec2 和 vec3 对 象 的 同 量 中 ， 简 化 
了 加 载 和 访问 OBJ 文 件 顶 点 的 过 程 。 回 想 一 下 这 些 GLM 类 ; 我 们 在 这 里 
使 用 它们 来 存储 顶点 位 置 、 纹 理 坐 标 和 法 同 量 。 然 后 ，ImportedModel 
类 中 的 读 取 函数 使 它们 可 用 于 C++/OpenGL 应 用 程序 ， 其 方式 与 Sphere 
和 Torus 类 中 的 方式 相同 。 





在 ModelImporter 和 ImportedModel 类 之 后 是 一 系列 调用 示例 ， 加 载 
OBJ 文 件 ， 然 后 将 项 点 信 息 传输 到 一 组 VBO 中 以 供 后 续 渔 染 





图 6.13 显 示 了 从 NASA 网 站 必 A16] 下 载 的 OBJ 格 式 的 航天 飞机 泻 染 模 
型 ， 使 用 程序 6.3 中 的 代码 导入 ， 并 使 用 程序 5.1 中 的 代码 和 相应 的 带 有 
各 向 异性 过 滤 的 NASA 纹 理 图 像 文件 进行 纹理 化 。 该 纹理 图 像 是 使 用 UV 
映射 的 示例 ， 其 中 模型 中 的 纹理 坐标 被 仔细 地 映射 到 纹理 图 像 的 特定 区 
域 。( 如 第 5 章 所 述 ，UV 了 映射 的 细节 超出 了 本 书 的 范围 。) 





图 6.13” 带 有 纹理 的 NASA 航 天 飞机 模型 











程序 6.3 简化 的 《有 限制 的 ) OBJ 加 载 器 





ImportedModel 和 ModelImporter 类 (ImportedModel.cpp) 


#include <fstream> 
#include <sstream> 
#include <glm\glm.hpp> 
#include "ImportedModel.h" 
using namespace std; 


DY ImportedModel 类 


ImportedModel: :ImportedModel(const char *filePath) { 
ModelImporter modelImporter = ModelImporter(); 
modelImporter.parseOBJ(filePath) ; // 使 用 modelImporter 获 取 顶 点 
信息 
numVertices = modelImporter.getNumVertices(); 
std::vector<float> verts = modelImporter.getVertices(); 
std::vector<float> tcs = modelImporter.getTextureCoordinates(); 
std::vector<float> normals = modelImporter.getNormals() ; 





for (int i = ðO; i < numVertices; i++) { 
vertices.push_back(glm: :vec3(verts[i*3], verts[i*3+1], verts[i*3+2]) 
) ; 
texCoords.push back(glm: :vec2(tcs[i*2], tcs[i*2+1])); 
normalVecs.push_back(glm: : vec3(normals[i*3], normals[i*3+1], normals 
[i*3+2])); 
} } 


int ImportedModel::getNumVertices() { return numVertices; } // acces 


sors 
std: :vector<glm: :vec3> ImportedModel::getVertices() { return vertices; } 
std: :vector<glm::vec2> ImportedModel: :getTextureCoords() { return texCoord 
S; } 


std: :vector<glm: :vec3> ImportedModel::getNormals() { return normalVecs; } 
// -------------- ModelImporter 类 
ModelImporter: :ModelImporter() {} 


void ModelImporter::parseOBJ(const char *filePath) { 
float x, y, Z; 
string content; 
ifstream fileStream(filePath, ios::in); 
string line = ""; 
while (!fileStream.eof()) { 
getline(fileStream, line); 
if (line.compare(®, 2, "v ") == @) { // 顶点 位 置 〈"v" 的 情况 





stringstream ss(line.erase(@, 1)); 

SS >> x; SS >> y; SS >> Zj // 提取 顶点 位 置 数值 
vertVals.push_back(x); 

vertVals.push_back(y); 

vertVals.push_back(z); 


























D 





EE 标 《"vt" 的 情 








if (line.compare(@, 2, "vt") == @) { // 纹理 





DL) 
stringstream ss(line.erase(@, 2)); 
SS >> Xj SS >> Yi // 提取 纹理 坐标 数值 
stVals.push back(x); 
stVals.push_back(y) ; 


























if (line.compare(@, 2, "vn") == @) { // 顶点 法 向 量 〈"vn "的 
情况 ) 
stringstream ss(line.erase(@, 2)); 
SS >> Xj SS >> y; SS >> Zj // 提取 法 癌 量 数值 
normVals.push_back(x); 
normVals.push_back(y) ; 
normVals.push_back(z); 


if (line.compare(®, 2, "f") == 6) { // 三 角形 面 〈"f" 的 情况 


string oneCorner, v, t, n; 
stringstream ss(line.erase(@, 2)); 
for (int i = ð; i < 3; i++) { 
getline(ss, oneCorner, ' '); // 提取 三 角形 面 引用 








stringstream oneCornerSS(oneCorner) ; 
getline(oneCornerss, v, '/'); 
getline(oneCornerss, t, '/'); 
getline(oneCornerSS, n, '/'); 


int vertRef = 














为 整 型 
int tcRef = 
int normRef 


( 


triangleVerts 


triangleVerts. 
triangleVerts. 


textureCoords 


at 
H 





textureCoords 


(stoi(v) - 1) * 3; // "stoi" 将 字符 串 转化 


stoi(t) - 1) * 2; 


(stoi(n) - 1) * 3; 





.push_back(vertVals[vertRef]); // 构建 顶点 向 量 


push_back(vertVals[vertRef + 1]); 
push_back(vertVals[vertRef + 2]); 




















.push_back(stVals[tcRef]); // 构建 纹理 坐标 


.push back(stVals[tcRef + 1]); 








normals.push_back(normVals[normRef]); // 法 问 量 的 向 量 
normals.push_back(normVals[normRef + 1]); 
normals.push_back(normVals[normRef + 2]); 


}}}} 


int ModelImporter::getNumVertices() { return (triangleVerts.size()/3); } 


// 读 取 函数 


std: :vector<float> ModelImporter::getVertices() { return triangleVerts; } 
std: :vector<float> ModelImporter: :getTextureCoordinates() { return texture 


Coords; } 


std: :vector<float> ModelImporter::getNormals() { return normals; } 





ImportedModel 和 ModelImporter 头 文件 (ImportedModel.h ) 


#include <vector> 


class ImportedModel 

{ 

private: 
int numVertices; 
std::vector<glm: :vec3> 
std::vector<glm: :vec2> 
std::vector<glm: :vec3> 

public: 


vertices; 
texCoords; 
normalVecs; 


ImportedModel(const char *filePath) ; 


int getNumVertices(); 
std: :vector<g1m: : vec3> 


getVertices(); 


std: :vector<glm::vec2> getTextureCoords(); 
std: :vector<glm::vec3> getNormals() ; 


}; 


class ModelImporter 















































{ 

private: 
// 从 0BJ 文 件 读 取 的 数值 
std::vector<float> vertVals; 
std::vector<float> stVals; 
std::vector<float> normVals; 
// 保存 为 顶点 属性 以 供 后 续 使 用 的 数值 
std::vector<float> triangleVerts; 
std::vector<float> textureCoords; 
std::vector<float> normals; 

public: 
ModelImporter(); 
void parseOBJ(const char *filePath) ; 
int getNumVertices(); 
std::vector<float> getVertices(); 
std::vector<float> getTextureCoordinates(); 
std::vector<float> getNormals(); 

}; 

使 用 模型 导入 器 

ImportedModel myModel("shuttle.obj"); // 在 顶层 声明 中 


void setupVertices(void) { 


std: :vector<glm::vec3> vert = myModel.getVertices(); 
std: :vector<glm::vec2> tex = myModel.getTextureCoords() ; 
std: :vector<glm::vec3> norm = myModel.getNormals(); 

int numObjVertices = myModel.getNumVertices(); 





std::vector<float> pvalues; // 顶点 位 置 
std: :Vector<float> tvalues; // 纹理 坐标 
std: :Vector<f1loat> nvalues; // YEAS 








for (int i = ð; i < numObjVertices(); i++) { 
pvalues.push_back((vert[i]).x); 
pvalues.push_back((vert[i]).y); 
pvalues.push_back((vert[i]).z); 
tvalues.push_back((tex[i]).s); 
tvalues.push_back((tex[i]).t); 
nvalues.push_back((norm[i]).x); 


nvalues.push_back((norm[i]).y); 
nvalues.push_back((norm[i]).z); 


} 


glGenVertexArrays(1, vao); 
glBindVertexArray(vao[@]); 
glGenBuffers(numVBOs, vbo); 


// 顶点 位 置 的 VBO 

glBindBuffer(GL_ARRAY_BUFFER, vbo[ð]); 

glBufferData(GL ARRAY BUFFER, pvalues.size() * 4, &pvalues[@], GL_STATI 
C_DRAW); 

















// 纹理 坐标 的 VBO 

glBindBuffer(GL ARRAY BUFFER, vbo[1]); 

glBufferData(GL ARRAY BUFFER, tvalues.size() * 4, &tvalues[@], GL_STATI 
C_DRAW); 





// 法 向 量 的 VBO 

glBindBuffer(GL_ARRAY_BUFFER, vbo[2]); 

glBufferData(GL ARRAY BUFFER, nvalues.size() * 4, &nvalues[@], GL_STATI 
C_DRAW); 
} 








fEdisplay()# 


glDrawArrays(GL_TRIANGLES, ©, myModel.getNumVertices()); 





补充 说 明 


虽然 我 们 讨论 了 使 用 DCC 工 具 创 建 3D 模 型 ， 但 我 们 没有 讨论 如 何 
使 用 这 些 工 具 。 相 关 教 程 超出 了 本 书 的 范围 ， 但 是 所 有 流行 的 工具 都 有 
大 量 的 教程 视频 材料 文档 可 供 使 用 ， 例 如 Blender 和 MAYA。 











3D 建 模 的 主题 本 吴 就 是 一 个 丰富 的 研究 领域 。 我 们 在 本 章 中 所 说 
只 是 一 个 基本 的 介绍 ， 重 点 是 它 与 OpenGL 的 关系 。 许 多 大 学 提供 3D 建 
模 的 全 部 读 程 ， 并 且 我 们 也 残 励 有 兴趣 学 习 更 多 的 读者 参考 一 些 提 供 更 


多 细节 的 流行 资源 〈 例 如 ，[BLl6, CHUL, VAL2Iy 。 


我 们 重申 ， 本 章 中 介绍 的 OBJ 导 入 器 是 很 有 限 的 ， 并 且 只 能 处 理 
OBJ 格 式 文 持 的 一 部 分 功能 。 虽 然 足 以 满足 我 们 的 需求 ， 但 它 会 在 茶 些 
OBJ 文 件 上 失败 。 在 这 些 情况 下 ， 有 必要 首先 将 模型 加 载 到 Blender (或 
MAYAS) 工具 中 ， 然 后 将 其 重新 导出 为 符合 导入 右 限 制 的 OBJ 文 件 ， 
如 本 章 前 面 押 述 。 





习题 


6.1 ”修改 程序 4.4， 使 “太阳 "行星" 和“ 月亮" 成 为 纹理 球体 ， 如 图 
4.11 所 示 。 


6.2 CHH) 修改 您 的 习题 6.1 的 程序 ， 以 使 得 图 6.16 中 导入 的 
NASA 衣 天 飞机 对 象 也 绕 “ 太 阳 ” 运 行 。 您 需要 试验 应 用 于 航天 飞机 的 尺 
度 和 旋转 方式 ， 使 其 看 起 来 更 逼真 。 





6.3 《研究 和 项 目 ) 了 解 如 何 使 用 Blender 创 建 自己 的 3D 对 象 的 基 
础 知识 。 想 要 在 您 的 OpenGL 应 用 程序 中 充分 利用 Blender， 您 将 需要 学 
习 如 何 使 用 Blender 的 UV 展开 工具 来 生成 纹理 坐标 和 相关 的 纹理 图 像 。 
然后 ， 您 可 以 将 对 象 导出 为 OBJ 文 件 ， 并 使 用 程序 6.3 中 的 代码 加 载 它 。 
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第 7 间 ”光照 





光照 以 不 同 的 方式 影响 着 我 们 世界 的 外 观 ， 有 时 甚至 是 很 戏剧 化 的 
方式 。 当 手电 位 照射 在 物体 上 时 ， 我 们 会 期 望 它 面向 光线 的 一 侧 看 起 来 
更 宫 。 我 们 所 居住 的 地 球 ， 在 中 午 朝 向 太阳 时 候 被 照 得 很 党 ,但 随 厦 它 
的 自转 ， 同 一 个 地 点 的 亮度 会 逐渐 由 白天 转变 为 傍晚 ， 直 到 午夜 变 得 完 
全 黑暗 。 物 体 对 光 的 反射 也 各 不 相同 。 物 体 除 了 颜色 的 差别 ， 也 可 以 具 
有 不 同 的 反射 特性 。 考 虑 两 个 物体 ， 在 都 是 绿色 的 情况 下 ， 其 中 一 个 是 
布 制 的 ， 而 妨 一 个 是 抛光 钢材 质 的 一 一 那么 后 者 看 起 来 会 更 “内 腕 ”。 








J: 1 光照 模型 











我 们 所 观察 到 的 光 是 高 能 量 源 发 出 的 光 了 于 ， 经 过 反射 直到 一 些 光 子 
到 达 我 们 的 眼睛 的 产物 。 不 羊 的 是 ， 在 计算 上 模拟 这 个 目 然 过 程 是 不 可 
行 的 ， 因 为 这 需要 模拟 并 跟踪 大 量 光 子 的 运动 ， 即 癌 我 们 的 场景 添加 海 
ERNA IERE 。 因 此 ， 我 们 需要 的 是 光照 模型 。 








光照 模型 (Lighting model〉 有 时 也 被 称 为 看 色 标 型 (Shading 
model) ， 在 着 色 器 编程 存在 的 情况 下 ， 这 可 能 有 点 令 人 困惑 。 有 时 又 
使 用 术语 反射 模型 (Reflection model) ， 进 一 步 使 术语 复杂 化 。 我 们 将 
尽力 坚持 使 用 简单 而 实用 的 术语 。 





现在 最 常见 的 光照 模型 称 为 “ADS” 模 型 ， 因 为 它们 基于 标记 为 A、 


D 和 S 的 3 种 类 型 的 反射 。 


。 环境 光 反 射 (Ambient reflection) 模拟 低级 光照 ， 影 啊 场 景 中 的 所 
有 物体 。 

。 漫 反射 (Diffuse reflection) 根据 光线 的 入 射 角度 调整 物体 亮度 。 

。 SH AY (Specular reflection) 用 以 展示 物体 的 光泽 ， 通 过 在 物体 
表面 上 ， 光 线 最 直接 地 反射 到 我 们 的 眼睛 的 位 置 ， 策 略 性 地 放置 适 
当 大 小 的 高 光 来 实现 。 


ADS 模 型 可 用 于 模拟 不 同 的 光照 效果 和 各 种 材质 。 


图 7.1《〈 见 彩 插 ) 展示 了 位 置 光 对 于 内 腕 黄金 环 面 的 环境 光 反 射 、 
漫 反 射 和 镜面 反射 分 量 





图 7.1 ADS 光 照 分 量 








回想 一 下 ， 场 景 的 绘制 最 终 是 由 片段 着 色 器 为 屏幕 上 的 每 个 像素 输 
出 颜色 而 实现 的 。 使 用 ADS 光 照 模型 需要 指定 由 于 像素 的 RGBA 输 出 值 
上 的 光照 而 产生 的 分 量 。 因 素 包 括 : 





© 光源 类 型 及 其 环境 、 漫 反射 和 镜面 反射 特性 ; 
。 对 象 材质 的 环境 、 漫 反射 和 镜面 反射 特征 ; 


。 对 象 的 材质 指定 为 “光泽 ”; 
。 光线 照射 物体 的 角度 ; 
。 从 中 查看 场景 的 角度 。 


7.2 ”光源 


光源 有 许多 类 型 ， 每 种 光源 具有 不 同 的 特性 ， 需 要 不 同 的 步骤 来 模 
拟 其 效果 。 第 见 光 源 类 型 有 : 


全 局 光 〔 通 第 称 为 “全 局 环境 光 ”， 因 为 它 仅 包 含 环 境 光 组 件 ); 
EHDE CROIRE AJG”) ; 

MEG R RCI”) ; 

聚光灯 。 





全 局 环境 光 是 最 简单 的 光源 模型 。 它 没有 光源 位 置 一 一 无 论 场景 中 
的 对 象 在 何 处 ， 其 上 的 每 个 像素 都 有 着 相同 的 光照 。 全 球 环境 光照 模拟 
了 现实 世界 中 的 一 种 光线 现象 ， 即 光线 经 过 很 多 次 反射 ， 其 光源 和 方 同 
都 已 经 无 法 确定 。 全 局 环境 光 仅 具有 环境 光 反 射 分 量 ， 用 RGBA 值 设 
定 ; 它 没有 漫 反 射 或 镜面 反射 分 量 。 例 如 ， 全 局 环境 光 可 以 定义 如 下 : 











float globalAmbient[4] = { 6.6f，6.6f，6.6f，1.6f }; 


RGBA WHEW E AO~ 1, 42 Fa ARETE E BEN Dh tes At 
其 中 RGB 各 值 设 为 0 一 1 的 相同 的 小 数 ，alpha 设 置 为 1。 





定 问 光 或 远 距 离 光 也 没有 源 位 置 ， 但 它 具 有 方向 。 它 可 以 用 来 模拟 
光源 距离 非 第 远 ， 以 至 于 光线 接近 平行 的 情况 ， 例 如 阳光 。 通 第 在 这 种 





情况 下 ， 我 们 可 能 只 对 建 模 光照 感 兴趣 ， 而 对 发 光 的 物体 不 感 兴趣 。 定 
向 光 对 物体 的 影响 取决 于 光照 角度 ， 物 体 在 朝向 定向 光 的 一 侧 比 在 切 向 
或 相对 侧 更 亮 。 建 模 定 向 光 需 要 指定 其 方向 《以 向 量 形式 ) 及 其 环境 、 
漫 反 射 和 镜面 特征 〈 以 RGBA 值 ) 。 指 向 Z 轴 负 方 向 的 红色 定向 光 可 以 
指定 如 下 : 





float dirLightAmbient[4] = { 68.1f, 868.6f, 0.0f, 1.6f }; 
float dirLightDiffuse[4] = { 1.6f, 868.6f, 0.0f, 1.6f }; 


float dirLightSpecular[4] = { 1.6f, 68.6f, 0.0f, 1.6f }; 
float dirLightDirection[3] = { 0.0f, 0.0f, -1.6f }; 








在 已 经 有 全 局 坏 境 光 的 情况 下 ， 定 同 光 的 环境 光 分 量 看 起 来 似乎 是 
多 余 的 。 然 而 ， 当 光源 “开局 ”或 “关闭 ”时 ， 全 局 环境 光 和 定 癌 光 的 环境 
光 分 量 的 区 别 就 很 明显 了 。 当 “开启 ”时 ， 总 环境 光 分 量 将 如 预期 的 那样 
增加 。 上 面 的 例子 中 ， 我 们 只 使 用 了 很 小 的 环境 光 分 量 。 在 实际 场景 
中 ， 应 当 根 据 场景 的 需要 平衡 两 个 环境 光 分 量 。 




















位 置 光 在 3D 场 景 中 具有 特定 位 置 。 人 靠近 场 景 的 光源 ， 例 如 合 灯 ， 
蜡烛 等 。 像 定向 光一 样 ， 位 置 光 的 效果 取决 于 撞击 角度 ; 但 是 ， 它 没有 
方向 ， 因 为 它 对 场景 中 的 每 个 顶点 的 光照 方 癌 都 不 同 。 位 置 光 还 可 以 包 
含 嘉 减 因 了 于， 以 模拟 它们 的 强度 随 距 离 减 小 的 程度 。 与 我 们 看 到 的 其 他 
类 型 的 光源 一 样 ， 位 置 光 具有 指定 为 RGBA 值 的 环境 光 反 射 、 慢 反射 和 
镜面 反射 特性 。 位 置 〈5,2,-3) 处 的 红色 位 置 光 可 以 指定 如 下 例 : 








float posLightAmbient[4] { 0.1f, 0.0f, 0.0f, 1.6f }; 
float posLightDiffuse[4] { 1.0f, 0.0f, 8.06f, 1.6f }; 
f，1.6f 33 


float posLightSpecular[4] { 1.0f,0.0f, @.0f, 1. 
float posLightLocation[ 3] { 5.0f, 2.0f, -3.6f }; 





衰减 因 了 于 有 多 种 建 模 方 式 。 其 中 一 种 方式 是 使 用 恒定 、 线 性 和 二 次 
方 ( 分 别称 为 kK, kilik) 衰减 ， 并 引入 非 负 可 调 参数 。 这 些 参数 与 离 光 
源 的 距离 (d) 结合 进行 计算 : 


l 
ka Te kid T kad? 





attenuation Factor = 


将 这 个 因子 与 光 的 强度 相 乘 可 以 使 距 光 更 远 时 ， 光 的 强度 衰减 更 
多 。 注 意 ， 太 应 当 永 远 设 置 为 大 于 等 于 1 的 值 ， 从 而 使 得 衰减 因 于 落 入 
[0...H 区 间 ， 并 当 d 增 大 时 接近 于 0 








采光 休 (spotlight〉 同 时 具有 位 置 和 方向 。 其 “ 锥 形 ” 效 果 可 以 使 用 
0? 一 90* 的 截 光 角 6 来 模拟 ， 指 定 光 束 的 半 宽 度 ， 并 使 用 衰减 指数 来 模拟 
随 光 束 角 度 的 强度 变化 。 如 图 7.2 所 示 ， 我 们 确定 聚光灯 方 辐 与 从 聚 光 
灯 到 像素 的 向量 之 间 的 角度 pg。 当 qg 小 于 时， 我 们 通过 将 g 的 余弦 提高 到 
腥 减 指数 来 计算 强度 因 于 《〈 当 g 大 于 6 时 ， 强 度 因 子 设 置 为 0) 。 结 果 是 
强度 因子 的 范围 为 0 一 1。 衰 减 指数 会 影响 当 角 度 % 增 加 时 ， 强 度 因子 趋 
于 0 的 速率 。 然 后 将 强度 因子 乘 以 光 的 强度 以 模拟 锥 形 效果 。 








D = 聚光灯 方 向 

V= 到 顶点 的 方向 p 
"a. D Or 

Q 7 


强度 因子 = cos “P(g) FA 
pT 





图 7.2 RICK BR 


位 于 (5,2,-3) 向 下 照射 Z 轴 负 方 向 的 红色 聚光灯 可 以 表示 为 : 


float spotLightAmbient[4] = { @.1f, 68.6f, 0.0f, 1.6f }; 
float spotLightDiffuse[4] = { 1.0f, 68.6f, 0.0f, 1.6f }; 
float spotLightSpecular[4] = { 1.0f,0.0f, 0.0f, 1.6f }; 
float spotLightLocation[3] = { 5.0f, 2.0f, -3.0f }; 
float spotLightDirection[3] = { 0.0f, 0.0f, -1.6f }; 
float spotLightCutoff = 20.0f; 

float spotLightExponent = 10.0f; 
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灯 就 成 为 了 计算 机 图 形 学 的 标志 。 


当 设计 拥有 许多 光源 的 系统 时 ， 程 序 员 应 该 考虑 创建 相应 的 类 续 
构 ， 如 定义 Light 类 以 及 其 子 类 GlobalAmbient、Directional、Positional 以 
及 Spotlight。 由 于 聚光灯 同时 具有 定向 光 和 位 置 光 的 特性 ， 这 里 就 值得 
使 用 C++ 的 多 继承 能 力 ， 让 Spotlight 类 同时 继承 于 实现 位 置 光 和 定 问 光 
的 类 。 在 示例 中 ， 由 于 内 容 足 够 简单 ， 因 此 我 们 在 当前 版 本 中 没有 加 入 
这 种 层次 结构 。 








7.3 材质 


我 们 场景 中 物体 的 “外 观 ” 目 前 仅 使 用 颜色 和 纹理 进行 表现 。 增 加 的 
光照 使 得 我 们 可 以 加 入 表面 的 反射 特性 。 即 对 象 如 何 与 我 们 的 ADS 光 照 
模型 相互 作用 。 这 可 以 通过 将 每 个 对 象 视 为 "由 茶 种 材质 制 成 ?来 建 模 。 





通过 指定 4 个 值 〈 我 们 已 经 熟悉 其 中 3 个 值 一 一 坏 境 光 、 漫 反射 和 镜 
面 RGB 颜 色 ) ， 可 以 在 ADS 光 照 模 型 中 模拟 材质 。 第 四 种 叫 作 光 渗 ， 正 


如 我 们 将 要 看 到 的 那样 ， 它 被 用 来 为 所 选材 质 建 立 一 个 合适 的 镜面 高 
光 。 目 前 许多 不 同类 型 的 常见 材质 已 经 有 ADS 和 光泽 度 值 了 。 例 

a, “nie? oy tae oP: 

float pewterMatAmbient[4] { .11f, .66f, .11f, 1.0f }; 

float pewterMatDiffuse[ 4] { .43f, .47f, .54f, 1.0f }; 


float pewterMatSpecular[4] = { .33f, .33f, .52f, 1.0f }; 
float pewterMatShininess = 9.85f; 





一 些 其 他 材质 的 ADS RGBA 值 见 图 7.3〈 引 自 EBAl6]) 。 


有 时 候 一 些 其 他 特性 也 属于 材质 特性 。 透 明度 由 RGBA 标 准 中 的 第 
四 个 《alpha) 通道 的 不 透明 度 来 实现 。 取 值 为 1.0 是 表示 完全 不 透明 ， 
取 值 为 0 时 表示 完全 透明 。 对 于 大 多 数 材 质 而 言 ， 只 需要 把 不 透明 度 设 
置 为 1.0 就 行 了 ， 但 是 对 于 某 些 特定 的 材质 ， 加 入 一 些 透明 度 是 很 重要 
的 。 例 如 ， 图 7.3 中 材质 “ 玉 ” 和 “珍珠 ”都 含有 少量 透明 度 〈( 取 值 略 微小 于 
1.0) 以 显得 更 加 真实 。 





境 光 RGBA 
PFN 


0.24725, 0.1995, 0.0745, 1.0 
0.75164, 0.60648, 0.22648, 1.0 
0.62828, 0.5558, 0.36607, 1.0 


0.135, 0.2225, 0.1575, 0.95 
0.54, 0.89, 0.63, 0.95 
0.3162, 0.3162, 0.3162, 0.95 


0.25, 0.20725, 0.20725, 0.922 
1.00, 0.829, 0.829, 0.922 
0.2966, 0.2966, 0.2966, 0.922 


0.19225, 0.19225, 0.19225, 1.0 
0.50754, 0.50754, 0.50754, 1.0 
0.50827, 0.50827, 0.50827, 1.0 











图 7.3 ”其 他 材质 的 ADS 系 数 





放 册 性 有 时 也 包含 在 ADS 材 质 规范 中 。 在 模拟 目 身 发 光 的 材质 〈 例 
UE ICM Jot) 时 非常 有 用 。 





没有 纹理 的 物体 在 演 染 时 ， 通 常 需要 指定 材质 特性 。 因 此 ， 预 定义 
一 些 可 供 选 择 的 材质 ， 在 使 用 时 会 很 方便 。 因 此 我 们 需要 在 Utils.cpp 文 
件 中 添加 如 下 代码 : 











// 黄金 材质 - 环境 光 、 漫 反射 、 镜 面 反 射 和 光泽 














float * Utils::goldAmbient() { static float a[4] 
745f, 1 }; return 

(float * ) a; } 
float * Utils::goldDiffuse() { static float a[4] 
265f, 1 }; return 

(float * ) a; } 
float * Utils::goldSpecular() { static float a[4] = { 0.6283f, @.5559f, ð. 
3661f, 1 }; return 

(float * ) a; } 
float Utils::goldShininess() { return 51.2; } 


{ @.2473f, @.1995f, 0.0 


{ @.7516f, @.6065f, 0.2 


// 白银 材质 - 环境 光 、 漫 反射 、 镜 面 反射 和 光泽 
float * Utils::silverAmbient() { static float a[4] 
.1923f, 1 }; return 

(float * ) a; } 
float * Utils::silverDiffuse() { static float a[4] 
.5075f, 1 }; return 

(float * ) a; } 
float * Utils::silverSpecular() { static float a[4] = { @.5083f, 0.5083f, 
@.5083f, 1 }; return 

(float * ) a; } 
float Utils::silverShininess() { return 51.2; } 





{ @.1923f, @.1923f, 0 


{ @.5075f, @.5075f, 2 


青铜 材质 一 环境 光 、 漫 反射 、 镜 面 反 射 和 光泽 

float * Utils::bronzeAmbient() { static float a[4] = { 0.2125f, @.1275f, © 
.0540f, 1 }; return 

(float * ) a; } 
float * Utils::bronzeDiffuse() { static float a[4] = { 0.7140f, 0.4284f, © 
.1814f, 1 }; return 

(float * ) a; } 
float * Utils::bronzeSpecular() { static float a[4] = { 0.3936f, @.2719Ff, 





@.1667f, 1 }; return 
(float * ) a; } 
float Utils::bronzeShininess() { return 25.6; } 








这 样 在 initO 函 数 中 或 全 局 中 为 物体 指定 “黄金 ”材质 就 非常 容易 了 ， 
如 下 所 示 。 


float* matAmbient = Utils::goldAmbient(); 
float* matDiffuse = Util: :goldDiffuse(); 


float* matSpecular = util.goldSpecular(); 
float matShininess = util.goldShininess(); 





注意 ， 目 前 为 止 的 各 小 节 中 ， 我 们 所 用 来 实现 的 光照 和 材质 特性 的 
代码 并 没有 引入 光照 。 这 些 代 码 仅仅 提供 了 用 于 描述 并 存储 场景 中 元 素 
所 需 光 照 和 材质 特性 的 一 种 方式 。 我 们 仍然 需要 自己 计算 光照 。 编 写 计 
算 光 照 的 代码 需要 在 我 们 的 着 色 器 代码 中 引入 一 些 严肃 的 数学 过 程 。 因 

此 ， 让 我 们 先 来 看 看 在 C++/OpenGL 和 GLSL 图 形 程序 中 实现 ADS 光 照 的 
基础 。 








7.4 ADS 光 照 计 算 


当 我 们 绘制 场景 时 ， 每 个 顶点 坐标 都 会 进行 变换 以 将 3D 世 界 模 拟 
到 2D 屏 幕 上 。 每 个 像素 的 颜色 都 是 光栅 化 、 纹 理 贴 图 以 及 插值 的 结 
果 。 现 在 我 们 需要 加 入 一 个 新 的 步 又 来 调整 这 些 光栅 化 之 后 的 像素 闫 
色 ， 以 便 反 应 场景 中 的 光照 和 材质 。 我 们 需要 做 的 基础 ADS 计 算是 确定 
每 个 像素 的 反射 强度 (Reflection Intensity, I) 。 计 算 过 程 如 下 : 


Tobserved = Tambient T Tdiffuse TT [specular 


BRAN its BET BET I EVIOS F BET BAA BEB. ESO ABE 





反射 分 量 ， 并 求 和 。 当 然 ， 这 些 计 算 都 基于 场景 内 的 光源 类 型 以 及 演 染 
中 模型 的 材质 类 型 。 








环境 光 分 量 是 最 简单 的 。 它 的 值 是 场景 环境 光 与 材质 环境 光 分 量 的 
FEAR: 





I ambient = Lightambient * Mater idlambient 


请 记 住 光 与 材质 亮度 都 是 RGB 值 ， 计 算 可 以 更 准确 地 描述 为 : 


red = 。 red .~ 1red 
Tabien 一 Lightembient * Mater ialambient 
greeny green -green 
[ambient — Lightombient * Mater tal smbient 
lue O Ja, lue ; .~ ,1blue 
ambient 一 Lights mbient * Mater ials mbient 





漫 反 射 分 量 会 更 复杂 一 些 ， 因 为 它 基于 光 对 于 平面 的 入 射 角 。 明 伯 
余弦 定律 (1760 年 出 版 ) 确定 了 表面 反射 的 光量 与 光 入 射 角 的 余 弱 成 正 
比 。 可 以 建 模 为 如 下 公式 : 





J diffuse = Lightdistuse * Mater ialdiffuse * cos(0) 


与 上 面 的 计算 相同 ， 实 际 计算 中 所 用 到 的 是 红 、 绿 、 蓝 分量 。 











确定 入 射 角 9 需要 a) 求解 从 所 绘制 向 量 到 光源 的 向 量 〈 或 者 与 光 
照 方 加 相反 的 向 量 ) ， Cb) 求解 所 泻 染 物体 表面 的 法 “垂直 ) HE. 
让 我 们 将 其 分 别称 为 和 N， 如 图 7.4 所 示 。 





图 7.4 入 射 角 





基于 场景 中 光 的 物理 特性 ， 向 量 工 可 以 通过 对 光照 方向 向 量 取 反 ， 
或 通过 计算 像素 位 置 到 光源 位 置 的 同 量 得 到 。 计 算 向 量 N 会 胀 烦 一 些 
一 一 法 疝 量 有 可 能 已 经 在 模型 中 给 出 了 ， 但 是 如 果 模 型 没有 给 出 法 问 量 
N， 那 么 就 需要 基于 周围 顶点 位 置 ， 在 儿 何 上 对 向 量 N 进 行 估 计 。 在 本 
章 剩 下 的 内 容 中 ， 我 们 假设 所 泻 染 的 模型 每 个 顶点 都 包含 法 问 量 《〈 使 用 
建 模 工具 如 MAYA 或 Blender 创 建 的 模型 ， 通 常 部 包含 法 同 量 〉。 




















事实 上 ， 在 计算 法 向 量 时 ， 没 必要 计算 出 0 角 本 号 的 角度 。 我 们 真 
正 需 要 的 是 cos(9)。 在 第 3 章 中 讲 过 ， 这 可 以 通过 点 乘 计算 得 出 。 因 此 ， 
漫 反 射 分 量 可 以 通过 如 下 公式 得 出 : 





Tdiffuse = Lightdiftuse * Mate r ialdiffuse * (Ñ e L) 





漫 反射 分 量 仅 当 表 面 暴露 在 光照 中 时 起 作用 ， 即 当 -90 < 0 < 90, 
cos(9) > 0 时 。 因 此 ， 我 们 需要 将 之 前 等 式 的 最 右 项 蔡 换 为 : 





max((N e L). 0) 
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变 宫 。 它 不 止 与 光源 的 入 射 角 相关 ， 也 与 光 在 表面 上 的 反射 角 以 及 观察 


Fa HERE TZ TE) ASR FAK 


在 图 7.5 中 ， 玉 代表 光 反 射 的 方向 ，Y《〈 叫 作 观 察 同 量 view vector) 
是 从 像素 到 眼睛 的 向 量 。 注 意 ，V 是 对 从 眼睛 到 像素 的 向 量 取 反 (在 相 
机 空间 中 ， 眼 睛 位 于 原点 ) 。 在 R 与 V 之 间 的 小 夹 角 % 越 小 ， 眼 睛 越 靠近 
光 轴 ， 或 者 说 看 向 反射 光 ， 因 此 像素 的 镜面 高 光 分 量 也 就 越 大 《像素 看 


m4 


Ww 











图 7.5 ”观察 点 入 射 角 


9 用 于 计算 镜面 反射 分 量 的 方式 取决 于 所 演 染 物体 的 “ 光 译 度 "。 极 
端 内 亮 的 物体 ， 如 镜子 ， 其 镜面 高 区 非常 小 一 一 筷 们 将 入 射 的 兴 直 接 反 
财 给 了 眼睛 。 不 那么 内 腕 的 物体 ， 其 镜面 蜗 光 会 扩散 开 来 ， 因 此 高 光 会 
包含 更 多 的 像素 。 








反光 上 度 通常 用 衰减 函数 来 建 模 ， 这 个 衰减 函数 用 来 表达 随 独 角度 
的 增 大 ， 镜 面 反 射 分 量 降低 到 0 的 速度 。 我 们 可 以 用 cos(p) 来 对 衰减 进行 
建 模 ， 通 过 余弦 函数 的 乘 方 来 增 减 反光 度 ， 如 cos(p), coS“(p), cos3(p)， 
cos10(g), cos>0(o) 等 ， 如 图 7.6 所 示 。 


cos(9) 
cos’(9) 


cos*(9) 











cos”"( g) 


图 7.6 ”以 余弦 指数 建 模 的 反光 度 





注意 ， 指 数 中 的 阶 数 越 蜗 ， 育 减 越 快 ， 因 此 在 视角 光 轴 外 的 反光 像 
素 镜 面 反射 分 量 越 小 。 我 们 将 娶 减 函数 cos"(q) 中 的 指数 nM 作 材 质 的 肥 
光度 因 了 于 。 注 意 在 之 前 的 图 7.3 中 ， 每 个 材质 的 反光 度 因子 在 最 右 列 给 
出 。 





现在 我 们 可 以 给 出 完整 的 镜面 反射 计算 : 
Tspec = Lightspec * M aterialspec * max(0, (Re V)") 


注意 ， 与 之 前 计算 漫 反 出 一 样 ， 我 们 使 用 了 max0 函 数 。 在 本 例 
中 ， 我 们 需要 确保 镜面 反射 分 量 不 使 用 cos(o) 所 产生 的 负 值 ， 如 采 使 用 
了 负 值 ， 则 会 有 奇怪 的 伪 影 ， 如 “上 暗 ” 镜 面 高 光 。 


同时 ， 如 之 前 一 样 ， 真 正 的 计算 中 包含 了 红 、 绿 、 分 量 。 
7.5 MADS 


在 7.4 节 中 所 讲述 的 计算 目前 为 止 都 是 理论 上 的 ， oe 
Æ ERAT AY PARTE MR AR ABSIT EERE. (FEA LS RR, 
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有 。 因 此 我 们 要 么 需要 计算 每 个 像素 的 法 问 量 ， 这 会 非常 耗 时 ， 要 么 需 
要 使 用 其 他 方法 对 所 需 的 值 进行 估计 ， 以 实现 足够 好 的 效果 。 








其 中 一 种 途径 称 为 “ 面 片 着 色 ” 或 “平坦 着 色 ”。 这 里 我 们 假定 所 泻 染 
图 元 〈 如 多 边 形 或 三 角形 ) 中 每 个 像素 的 光照 值 都 一 样 。 因 此 我 们 只 需 
要 对 模型 每 个 多 边 形 的 一 个 顶点 进行 光照 计算 ， 然 后 以 每 个 多 边 形 或 每 
个 三 角形 为 基础 ， 将 计算 结果 的 光照 值 复 制 到 相 邻 的 像 系 中 。 





现在 面 片 着 色 几 乎 已 经 不 再 使 用 ， 因 为 其 泻 染 结果 看 来 不 够 真实 ， 
同时 现代 硬件 已 经 可 以 进行 更 加 精确 的 计算 了 。 图 7.7 中 展示 了 一 个 面 
片 厦 色 环 面 的 例 于 ， 其 中 每 个 三 角形 都 作为 平坦 的 反射 表面 。 








图 7.7 面 片 着 色 的 环 面 





里 然 某 些 情况 下 ， 面 片 着 色 可 能 已 经 够 用 了 (或 者 故意 使 用 其 效 
R) ， 但 是 通常 “平滑 着 色 ” 是 一 种 更 好 的 途径 。 在 平滑 着 色 的 过 程 中 ， 
会 对 每 个 像素 计算 光照 强度 。 现 代 显 卡 的 并 行 处 理 功能 ， 以 及 OpenGL 
图 形 管线 中 的 插值 演 染 让 平滑 着 色 变 得 可 行 。 














我 们 将 会 观察 两 个 流行 的 平滑 着 色 方 法 : Gouraud 着 色 和 Phong 着 
色 。 


7.5.1 Gouraud 着 色 ( 双 线性 光 强 插值 法 ) 








法 国 计 算 机 科学 家 Henri Gouraud 在 1971 年 发 表 的 平滑 着 色 算法 后 来 
被 称 为 Gouraud 着 色 [IGo2Z。 由 于 使 用 了 3D 图 形 管线 (如 OpenGL ) 中 的 
自动 插值 泻 染 ， 它 特别 适用 于 现代 显卡 。Gouraud 着 色 过 程 如 下 。 


(1) 确定 每 个 顶点 的 颜色 ， 以 及 光照 相关 计算 。 


(2) 人 允许 正常 的 光栅 化 过 程 在 插入 像素 时 对 颜色 也 进行 插值 〈 同 
时 也 对 光照 进行 插值 ) 。 


在 OpenGL 中 ， 这 表示 大 多 数 光照 计算 部 是 在 顶点 着 色 器 中 完成 
的 ， 片 段 着 色 器 仪 做 传递 并 展示 自动 插值 的 光照 后 的 颜色 。 





图 7.8 展 示 了 在 场景 中 包含 环 面 和 单一 位 置 光 的 情况 下 ， 我 们 将 会 
用 来 在 OpenGL 中 实现 Gouraud 着 色 器 的 策略 。 程 序 7.1 中 实现 了 这 个 策 
He o 


JOGL(Java) 代 码 顶点 着 色 器 片段 着 色 器 


1. 根据 顶点 计算 N、 
1. 模型 顶点 Ly VÄRI 
2. 顶点 法 向 量 = 2. 计算 4、 D, 5 分 量 
放 入 统一 变量 : 2; 

1. MV 和 PROJ 第 阵 变 换 
2. 光照 和 材质 特性 







放 入 缓冲 区 : 


- gl position 





图 7.8 ”实现 Gouraud 着 色 


程序 7.1 ”位置 光 和 Gouraud 着 色 器 下 的 环 面 

















C++/0penGL 应 用 程序 


#include "Torus.h" 
#include "Utils.h" 


// 用 于 创建 着 色 器 和 泻 染 程序 的 声明 ， 如 前 

// VAO、 两 个 VB0 以 及 环 面 的 声明 ， 如 前 

// 环 面 与 相机 位 置 的 声明 和 赋值 ， 如 前 

// Utils.cpp 中 现在 已 经 添加 有 金 、 银 、 青 铜 材质 






































// 为 display() 函数 分 配 变 量 
GLuint mvLoc, projLoc, nLoc; 




















// 着 色 器 统一 变量 中 的 位 置 
GLuint globalAmbLoc, ambLoc, diffloc, specLoc, posLoc, mAmbLoc, mDiffLoc, 
mSpecLoc, mShiLoc; 











glm: :mat4 pMat, vMat, mMat, mvMat, invTrMat; 

glm: :vec3 currentLightPos, lightPosV; // 在 模型 和 视觉 空间 中 的 光照 位 置 ，Vect 
or3f 类 型 

float lightPos[3]; // 光照 位 置 的 浮 点 数组 




















// 初始 化 光照 位 置 
glm: :vec3 initialLightLoc = glm::vec3(5.0f, 2.0f, 2.0f); 








// 白光 特性 
float globalAmbient[4] = { 0.7f, ©.7f, ©.7f, 1.0f }; 
float lightAmbient[4] = { 6.6f，6.6f，6.6f，1.6f }; 
float lightDiffuse[4] = { 1.0f, 1.6f, 1.6f, 1.0f }; 
float lightSpecular[4] = { 1.0f, 1.0f, 1.0f, 1.0f }; 





// 黄金 材质 特性 

float* matAmb = Utils::goldAmbient(); 
float* matDif = Utils::goldDiffuse(); 
float* matSpe = Utils::goldSpecular(); 
float matShi = Utils::goldShininess(); 














void setupVertices(void) { 
// 该 函数 与 之 前 章节 中 的 相同 ， 没 有 改动 
// 下 面 的 部 分 在 这 里 出 现 是 为 了 更 清晰 ， 现 在 我 们 将 真 的 使 用 法 向 量 
























































glBindBuffer(GL_ARRAY_BUFFER, vbo[2]); 
glBufferData(GL ARRAY BUFFER, nvalues.size() * 4, &nvalues[@], GL_STATI 


C_DRAW); 
} 


void display(GLFWwindow* window, double currentTime) { 


// 清除 深度 缓冲 区 ， 如 之 前 例子 中 一 样 载 入 演 染 程序 
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// 用 于 模型 -视图 变换 、 投 影 以 及 逆转 置 ( 法 向 量 ) 符 阵 的 统一 变量 

mvLoc = glGetUniformLocation(renderingProgram, "mv_matrix"); 
projLoc = glGetUniformLocation(renderingProgram, "proj _ matrix"); 
nLoc = glGetUniformLocation(renderingProgram, "norm matrix"); 














// 初始 化 投影 及 视图 矩阵， 如 前 例 




















// FEF RE, PER AL EE 

mMat = glm::translate(glm::mat4(1.0f), glm::vec3(torLocX, torLocY, torL 
ocZ)); 

// 旋转 环 面 以 便 更 容易 看 到 

mMat *= glm::rotate(mMat, toRadians(35.0f), glm::vec3(1.0f, 0.0f, 8.6f) 
































) ; 





// 基于 当前 光源 位 置 ， 初 始 化 光照 

currentLightPos = glm::vec3(initialLightLoc.x, initialLightLoc.y, initi 
alLightLoc.z); 

installLights(vMat) ; 

// 通过 合并 矩阵 v 和 m， 创 建 模 型 -视图 (MV) 和 矩阵 ， 如 前 

mvMat = vMat * mMat; 


























// 构建 MV 算 阵 的 逆转 置 矩 阵 ， 以 变换 法 向 量 


invTrMat = glm::transpose(glm::inverse(mvMat)); 








山 | 





// 将 MV、PRO]J 以 及 逆转 置 (法 向 量 ) 和 矩阵 传 入 相应 的 统一 变量 
glUniformMatrix4fv(mvLoc, 1, GL_FALSE, glm::value_ptr(mvMat)) ; 

glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(pMat) ) ; 
glUniformMatrix4fv(nLoc, 1, GL_FALSE, glm::value_ptr(invTrMat) ) ; 


// 在 顶点 着 色 器 中 ， 将 顶点 缓冲 区 (VB0 扣 ) 绑 定 到 顶点 属性 #9 
glLBindBuffer(GL_ARRAY_BUFFER，vbo[6]); 
glVertexAttribPointer(@, 3, GL_FLOAT, false, ©, @); 
glEnableVertexAttribArray(@) ; 











// 在 顶点 着 色 器 中 ， 将 法 向 缓冲 区 (VBO #2) 绑 定 到 顶点 属性 #1 
glBindBuffer(GL ARRAY BUFFER, vbo[2]); 
glVertexAttribPointer(1, 3, GL FLOAT, false, ©, 0); 
glEnableVertexAttribArray(1) ; 





ð); 
} 


glEnable(GL_CULL_FACE); 
glFrontFace(GL_CCW); 

glEnable(GL_DEPTH_TEST); 
glDepthFunc(GL_LEQUAL) ; 


glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vbo[3]); 
glDrawElements(GL_TRIANGLES, myTorus.getNumIndices(), GL_UNSIGNED_INT, 


void installLights(glm::mat4 vMatrix) { 


} 
// 





// 将 光源 位 置 转换 为 视图 空间 坐标 ， 并 存 入 浮 点 数组 

lightPosV = glm::vec3(vMatrix * glm::vec4(currentLightPos, 1.0)); 
lightPos[@] = lightPosV.x; 

lightPos[1] = lightPosvV.y; 

lightPos[2] = lightPosV.z; 








// 在 着 色 器 中 获取 光源 位 置 和 材质 属性 
globalAmbLoc = glGetUniformLocation(renderingProgram, "“globalAmbient") ; 





ambLoc = glGetUniformLocation(renderingProgram, "light.ambient"); 
diffloc = glGetUniformLocation(renderingProgram, "light.diffuse") ; 
specLoc = glGetUniformLocation(renderingProgram, "“light.specular") ; 
posLoc = glGetUniformLocation(renderingProgram, "light.position") ; 
mAmbLoc = glGetUniformLocation(renderingProgram, "material.ambient"); 
mDiffloc = glGetUniformLocation(renderingProgram, "material.diffuse") ; 
mSpecLoc = glGetUniformLocation(renderingProgram, "material.specular") ; 


mShiLoc = glGetUniformLocation(renderingProgram, "“material.shininess") ; 








// 在 着 色 器 中 为 光源 与 材质 统一 变量 赋值 
glProgramUniform4fv(renderingProgram, globalAmbLoc, 1, globalAmbient) ; 
glProgramUniform4fv(renderingProgram, ambLoc, 1, lightAmbient) ; 
glProgramUniform4fv(renderingProgram, diffLoc, 1, lightDiffuse) ; 
glProgramUniform4fv(renderingProgram, specLoc, 1, lightSpecular) ; 
glProgramUniform3fv(renderingProgram, posLoc, 1, lightPos); 
glProgramUniform4fv(renderingProgram, mAmbLoc, 1, matAmb); 
glProgramUniform4fv(renderingProgram, mDiffLoc, 1, matDif); 
glProgramUniform4fv(renderingProgram, mSpecLoc, 1, matSpe); 
glProgramUniformif(renderingProgram, mShiLoc, matShi); 








init() WR main() 函数 如 前 





程序 7.1 中 的 很 多 元 素 我 们 都 已 经 熟悉 了 。 首 先 ， 定 义 了 环 面 、 光 


PRADA PPE. RERE DA IZ IA) SE AX. display() 
函数 与 之 前 程序 中 的 类 似 ， 在 这 里 不 同 的 是 它 同 时 也 将 光照 和 材质 信息 
传 入 顶点 着 色 器 。 为 了 传 入 这 些 信息 ， 它 调用 installLights()， 将 光源 在 
视觉 空间 中 的 位 置 ， 以 及 材质 的 ADS 特 性 ， 读 入 相应 的 统一 变量 以 供 着 
色 占 使 用 。 注 意 ， 我 们 提前 定义 了 这 些 统一 位 置 变 量 ， 以 求 更 好 的 性 
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其 中 一 个 重要 的 细节 是 变换 矩阵 MV， 用 来 将 顶点 位 置 移动 到 视觉 
空间 ， 但 它 并 不 总 能 正确 地 将 法 同 量 也 调整 进 视觉 空间 。 和 直接 对 法 癌 量 
应 用 MV 窍 阵 不 能 保证 法 同 量 依然 与 物体 表面 王 直 。 正 确 的 变换 是 MV 
的 逆转 置 窃 阵 ， 在 第 3 章 “ 补 充 说 明 ” 中 有 描述 。 在 程序 7.1 中 ， 这 个 新 增 
的 矩阵 叫 作 “invTrMat”"， 通 过 统一 变量 传 入 着色 器 。 

















变量 lightPosV 包 含 光 源 在 相机 空间 中 的 位 置 。 我 们 每 帧 只 需要 计算 
一 次 ， 因 此 我 们 在 installLights0 中 [在 display0 中 调用 ] 而 非 着 色 器 中 计 
算 。 着 色 器 在 下 方 的 续 程 序 7.1 中 。 其 中 顶点 着 色 器 使 用 了 一 些 我 们 目 
前 没有 见 过 的 符号 。 注 意 ， 在 顶点 着 色 器 最 后 进行 了 向 量 加 法 一 一 在 第 
3 章 中 有 讲 ， 并 且 在 GLSL 中 可 用 。 我 们 将 会 在 展示 着 色 器 之 后 讨论 其 他 
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符号 。 











顶点 着 色 器 





#version 430 

layout (location=@) in vec3 vertPos; 
layout (location=1) in vec3 vertNormal; 
out vec4 varyingColor; 


struct PositionalLight 
{ vec4 ambient; 

vec4 diffuse; 

vec4 specular; 

vec3 position; 


struct Material 
{ vec4 ambient; 

vec4 diffuse; 

vec4 specular; 

float shininess; 
}; 
uniform vec4 globalAmbient; 
uniform PositionalLight light; 
uniform Material material; 
uniform mat4 mv_matrix; 
uniform mat4 proj_matrix; 
uniform mat4 norm_matrix; // 用 来 变换 法 向 量 




















void main(void) 
{ vec4 color; 


// 将 顶点 位 置 转换 到 视觉 空间 

// 将 法 向 量 转换 到 视觉 空间 

// 计算 视觉 空间 光照 向 量 ( 从 顶点 到 光源 ) 

vec4 P = mv_matrix * vec4(vertPos,1.@); 

vec3 N = normalize((norm_matrix * vec4(vertNormal,1.@)).xyz); 
vec3 L = normalize(light.position - P.xyz); 























// 视觉 向 量 等 于 视觉 空间 中 的 负 顶 点 位 置 
= normalize(-P.xyz); 











// R 是 -L 的 相对 于 表面 向 量 N 的 镜像 
vec3 R = reflect(-L,N); 














// 环境 光 、 漫 反射 和 镜面 反射 分 量 

vec3 ambient = ((globalAmbient * material.ambient) + (light.ambient * ma 
terial.ambient)).xyz; 

vec3 diffuse = light.diffuse.xyz * material.diffuse.xyz * max(dot(N,L), 
0.0); 

vec3 specular = 

material.specular.xyz * light.specular.xyz * pow(max(dot(R,V), ©.©0f), 

material.shininess); 


时 








// 将 颜色 输出 发 送 到 片段 着 色 器 


varyingColor = vec4((ambient + diffuse + specular), 1.0); 


// 将 位 置 发 送 到 片段 着 色 器 ， 如 前 
gl Position = proj matrix * mv_matrix * vec4(vertPos,1.@); 


} 
片段 着 色 器 











#version 430 
in vec4 varyingColor; 
out vec4 fragColor; 


// 与 顶点 着 色 器 相同 的 统一 变量 
// 但 并 不 直接 在 当前 片段 着 色 器 使 用 


























struct PositionalLight 
{ vec4 ambient; 

vec4 diffuse; 

vec4 specular; 

vec3 position; 


struct Material 
{ vec4 ambient; 

vec4 diffuse; 

vec4 specular; 

float shininess; 
}; 
uniform vec4 globalAmbient; 
uniform PositionalLight light; 
uniform Material material; 
uniform mat4 mv_matrix; 
uniform mat4 proj_matrix; 
uniform mat4 norm_matrix; 


void main(void) 
{ fragColor = varyingColor; 


} 





程序 7.1 的 输出 如 图 7.9 所 示 。 





KI7.9 Gouraud 着 色 的 环 面 





顶点 着 色 器 代码 中 有 我 们 第 一 次 使 用 了 结构 体 语法 的 示例 。 
GLSL“ 结 构 体 ”就 像 一 个 数据 类 型 ， 它 有 名 称 和 一 组 字段 。 当 使 用 结构 
体 名 称 声明 变量 时 ， 这 个 变量 将 包含 结构 体 中 声明 的 字段 ， 并 可 以 通 
过 “.” 语 法 访问 字段 。 例 如 ， 变 量 “"light”" 声 明 为 “PositionalLight” 类 型 ， 
此 我 们 可 以 在 其 后 引用 其 字段 light.ambient，light.diffuse 等 。 





还 要 注意 字段 选择 器 符号 “xyz”， 我 们 在 顶点 着 色 器 中 的 多 个 地 方 
都 使 用 了 这 种 语法 。 这 是 将 vec4 转 换 为 仅 包 含 其 前 3 个 元 素 的 等 效 vec3 
的 快捷 方式 。 


绝 大 多 数 光 照 计算 发 生 在 顶点 着 色 器 中 。 对 于 每 个 项 点， 将 适当 的 
窃 阵 变换 应 用 于 顶点 位 置 和 相关 的 法 疝 量 ， 并 计算 用 于 光 方 和 同 〈 工 ) 和 
BON CR) 的 问 量 。 然 后 执行 7.4 节 中 描述 的 ADS 计 算 ， 得 到 每 个 顶点 的 
颜色 〈 代 码 中 名 为 varyingColor) 。 颜 色 作 为 正 篆 光栅 化 过 程 的 一 部 分 
进行 插值 。 之 后 片段 着 色 器 仅 作 为 简单 传递 。 隐 长 的 统一 变量 声明 列表 
也 在 片段 着 色 器 中 (由 于 前 面 第 4 章 中 摘 述 的 原因 )〉 ， 但 实际 上 并 没有 
FEAR EAE. 








注意 GLSL 函 数 normalize()， 它 用 来 将 癌 量 转换 为 单位 长 度 。 正 确 地 
进行 点 积 运 算 必 须要 先 使 用 该 函数 。reflectO) 函 数 则 计算 一 个 向 量 基于 
另 一 个 向 量 的 反射 。 











图 7.9 输 出 的 环 面 中 有 很 明显 的 伪 影 。 其 镜面 高 光 有 着 块 状 、 面 方 
感 。 这 种 伪 影 在 物体 移动 时 会 更 加 明显 但 我 们 在 书 中 没 法 展示 移动 的 
物体 ) 。 





Gouraud 着 色 也 容易 受到 其 他 伪 影 影响 。 如 果 镜 面 高 光 整 个 范围 都 
在 模型 中 的 一 个 三 角形 内 即 高 光 范 围 内 一 个 模型 顶点 也 没有 一 一 那 
么 它 可 能 不 会 被 泻 染 出 来 。 由 于 镜面 反射 分 量 是 依 项 点 计算 的 ， 因 此 ， 
当 模型 所 有 顶点 都 没有 镜面 反射 分 量 时 ， 其 光栅 化 后 的 像素 也 不 会 有 镜 
面 反 射 光 。 





7.5.2 Phong 着 色 





Bui Tuong Phong 在 犹他 大 学 的 研究 生 期 间 开 发 了 一 种 平滑 的 着 色 算 
法 ， 在 1973 年 的 论文 P93 引 中 对 其 进行 了 描述 ， 并 在 PH 中 发 表 。 该 算 
法 的 结构 类 似 于 Gouraud 着 色 的 算法 ， 其 不 同 之 处 在 于 光照 计算 是 按 像 
素 而 非 顶点 完成 。 由 于 光照 计算 需要 法 回 量 N 和 交 回 量 工 ， 但 在 模型 中 
仅 顶 点 包含 这 些 信息 ， 因 此 Phong 着 色 通 利 使 用 巧妙 的 “技巧 ”来 实现 ， 
其 中 N 和 工 在 顶点 独 色 器 中 进行 计算 ， 并 在 光栅 化 期 间 插值 。 图 7.10 概 述 
了 此 策略 。 


JOGL(Java) 代 码 





(与 Gouraud 着 色相 同 ) 


图 7.10 ”实现 Phong 着 色 








C++/OpenGL 代 码 完 全 如 前 。 之 前 部 分 在 顶点 着 色 需 中 完成 的 过 程 
现在 回放 入 片段 着 色 器 中 进行 。 法 向 量 插值 的 效果 如 图 7.11 所 示 。 


Ni 





图 7.11 法 向 量 插值 


现在 我 们 已 经 准备 好 使 用 Phong 着 色 实 现 位 置 光 照射 下 的 环 面 了 。 
大 多 数 代 码 与 实现 Gouraud 着 色 的 代码 相同 。 由 于 C++/OpenGL 代 码 完 全 
没有 改变 ， 在 此 我 们 只 展示 修改 过 的 顶点 着 色 器 和 片段 着 色 器 ， 见 程序 
7.2。 程 序 7.2 的 输出 如 图 7.12 所 示 ，Phong 着 色 修 正 了 Gouraud 着 色 中 出 
现 的 伪 影 。 





图 7.12 ”Phong 着 色 的 环 面 








顶点 着 色 器 





#version 430 
layout (location=@) in vec3 vertPos; 
layout (location=1) in vec3 vertNormal; 





out vec3 varyingNormal; // 视觉 空间 顶点 法 向 量 
out vec3 varyingLightDir; // 指向 光源 的 癌 量 
out vec3 varyingVertPos; // 视觉 空间 中 的 顶点 位 置 





// 结构 体 和 统一 变量 与 G6ouraud 着 色相 同 





void main(void) 

{ // 输出 顶点 位 置 、 光 照 方向 和 法 向 量 到 光栅 器 以 进行 插值 
varyingVertPos=(mv_matrix * vec4(vertPos,1.0)).xyz; 
varyingLightDir = light.position - varyingVertPos; 
varyingNormal=(norm_matrix * vec4(vertNormal,1.@)).xyz; 





gl Position=proj_matrix * mv_matrix * vec4(vertPos,1.0); 


} 
HRA dt 





#version 430 

in vec3 varyingNormal; 
in vec3 varyingLightDir; 
in vec3 varyingVertPos; 
out vec4 fragColor; 











// 结构 体 和 统一 变量 与 G6ouraud 着 色相 同 





程序 7.2 Phong 着 色 的 环 








void main(void) 

{ // 正规 化 光照 向 量 、 法 向 量 、 视 觉 向 量 
vec3 L = normalize(varyingLightDir); 
vec3 N = normalize(varyingNormal); 
vec3 V = normalize(-varyingVertPos); 























// 计算 光照 向 量 基于 N 的 反射 向 量 
vec3 R = normalize(reflect(-L, N)); 
// 计算 光照 与 平面 法 向 量 间 的 角度 

float cosTheta = dot(L,N); 

// 计算 视觉 向 量 与 反射 光 向 量 的 角度 
float cosPhi = dot(V,R); 



































// 计算 ADSs 分 量 ( 按 像素 )， 并 合并 以 构建 输出 颜色 

vec3 ambient = ((globalAmbient * material.ambient) + (light.ambient * ma 
terial.ambient)).xyz; 

vec3 diffuse = light.diffuse.xyz * material.diffuse.xyz * max(cosTheta,@ 
.0) 

vec3 specular = 

light.specular.xyz * material.specular.xyz * pow(max(cosPhi,@.@), mat 

erial.shininess); 








fragColor = vec4((ambient + diffuse + specular), 1.0); 


} 





虽然 Phong 着 色 有 着 比 Gouraud 着 色 更 真实 的 效果 ， 但 这 是 建立 在 增 
大 性 能 消耗 的 基础 上 的 。James Blinn 在 1977 年 提出 了 一 种 对 于 Phong 着 
色 的 优化 方法 Bi， 被 称 为 Blinn-Phong 反 射 模型 。 这 种 优化 是 基于 观 
察 到 Phong 着 色 中 消耗 最 大 的 计算 之 一 是 解 出 反射 问 量 R。 

















Blinn 发 现 同 量 R 在 计算 过 程 中 并 不 是 必需 的 一 一 R 只 是 用 来 计算 角 g 
的 手段 。 角 gq 的 计算 可 以 不 用 向 量 R， 而 通过 L 与 V 的 角 平 分 线 向 量 H 得 
到 。 如 图 7.13 所 示 ， 五 和 N 之 间 的 角 a 刚 好 等 于 V2(qg)。 昌 然 a 与 9 不 同 ， 
但 Blinn 展 示 了 使 用 w 代 替 g% 就 已 经 可 以 获得 足够 好 的 结 








图 7.13 ”Blinn-Phong 反 射 


角 平 分 线 向 量 可 以 简单 地 使 用 L+V 得 到 ( 见 图 7.14) ， 之 后 cos(o 可 
以 通过 7。N 的 点 积 计算 。 





图 7.14 ”Blinn-Phong 计 算 


这 些 计 算 可 以 在 片段 着 色 器 中 进行 ， 甚 至 为 了 性 能 考虑 (经 过 一 些 
调整 ) 也 可 以 在 顶点 着 色 器 中 进行 。 图 7.15 展 示 了 使 用 Blinn-Phong 着 色 
的 环 面 。 它 在 图 形 质量 上 几乎 与 Phong 泻 染 相 同 ， 同 时 节省 了 大 量 性 能 
损耗 。 











图 7.15 Blinn-Phong 4 4.94 i 














程序 7.3 中 展示 了 修改 后 顶点 着 色 器 和 片段 着 色 器 ， 它 们 用 来 将 程 
序 7.2 中 的 Phong 着 色 示 例 转 换 为 Blinn-Phong 着 色 。C++ /OpenGL 代 码 与 
ZA PIA Eth 


程序 7.3 ”Blinn-Phong 着 色 的 环 面 








顶点 着 色 器 





// 角 平 分 线 向 量 H 作为 新 增 的 输出 


out vec3 varyingHalfVector; 








void main(void) 
{ // 与 之 前 的 计算 相同 ， 增 加 了 L+V 的 计算 
varyingHalfVector = (varyingLightDir + (-varyingVertPos) ).xyz; 




















// (其 余 项 点 着 色 器 代码 没有 改动 ) 








HRA dt 





in vec3 varyingHalfVector; 


vöid matnini 
{ // 注意 ， 现 在 已 经 不 需要 在 片段 着 色 器 中 计算 R 


vec3 L = normalize(varyingLightDir) ; 


vec3 N = normalize(varyingNormal1) ; 
vec3 V = normalize(-varyingVertPos) ; 
vec3 H = normalize(varyingHalfVector) ; 








// 计算 法 向 量 N 与 角 平 分 线 向 量 H 之 间 的 角度 
float cosPhi = dot(H,N); 
































// 角 平 分 线 向 量 H 已 经 在 顶点 着 色 器 中 计算 过 ， 并 在 光栅 器 中 进行 过 插值 
vec3 ambient = ((globalAmbient * material.ambient) + (light.ambient * ma 
terial.ambient)).xyz; 
vec3 diffuse = light.diffuse.xyz * material.diffuse.xyz * max(cosTheta,Q@ 
.0); 
vec3 specular = 
light.specular.xyz * material.specular.xyz * pow(max(cosPhi,@.@), mat 
erial.shininess*3.@); 
// 最 后 乘 以 3.6 作 为 改善 镜面 高 光 的 微调 
fragColor = vec4((ambient + diffuse + specular), 1.0); 


} 





























图 7.16《〈 见 彩 插 ) 所 示 的 两 个 例子 展示 了 Phong 着 色 应 用 在 比较 复 
杂 的 外 部 软件 生成 模型 上 所 产生 的 效 末 。 图 7.16 上 图 展示 了 Jay 
Turberville 在 Studio 522 Productions [TU161 创 建 的 OBJ 格 式 海 豚 模 型 的 演 染 
图 。 图 7.16 下 图 是 著名 的 “斯 坦 福 龙 ”的 演 染 ， 斯 坦 福 龙 是 1996 年 对 一 个 
小 模型 进行 3D 扫 描 所 得 到 的 模型 S93。 两 个 模型 都 使 用 我 们 放 
在 “Utils.cpp” 文 件 中 的 “黄金 ”材质 进行 演 染 。 斯 坦 福 龙 因 其 大 小 而 被 广 
沁 用 于 测试 图 形 算法 和 硬件 一 一 它 包 含 超过 800 000 个 三 角形 。 








图 7.16 Phong 着 色 的 外 部 模型 


76 ”结合 光照 与 纹理 


目前 为 止 ， 在 光照 模型 中 ， 都 是 假设 我 们 使 用 按 ADS 定 义 的 光源 ， 
照 腕 按 ADS 定 义 材质 的 物体 。 但 是 ， 正 如 我 们 在 第 5 章 中 所 讲 的 ， 茶 些 
对 象 的 表面 可 能 会 指定 纹理 图 像 。 因 此 ， 我 们 需要 一 种 方法 来 结合 采样 
纹理 所 得 的 颜色 和 光照 模型 产生 的 颜色 。 


我 们 结合 光照 和 纹理 的 方式 取决 于 物体 的 特性 以 及 其 纹理 的 目的 。 
这 里 有 多 种 情况 ， 其 中 管见 的 有 : 


。 纹理 图 像 很 写实 地 反映 了 物体 真实 的 表面 外 观 ; 

。 物体 同时 具有 材质 和 纹理 ; 

。 材质 包括 了 阴影 和 反射 信息 〈 在 第 8 草 、 第 9 章 中 ) ; 
。 有 多 种 光 和 /或 多 个 纹理 。 








我 们 先 来 观察 第 一 种 情景 ， 物 体 拥 有 一 个 简单 的 纹理 ， 同 时 我 们 对 
它 进行 光照 。 实 现 这 种 光照 的 一 种 简单 方法 是 在 片段 着 色 器 中 完全 将 材 
质 特性 去 除 掉 ， 之 后 使 用 纹理 取样 所 得 纹理 颜色 代 蔡 材质 的 ADS 值 。 下 
面 的 盆 代 码 展示 了 这 种 集 略 : 


fragColor = textureColor * ( ambientLight + diffuseLight ) + specularLight 


这 种 策略 下 ， 纹 理 颜 色 影响 了 环境 光 和 漫 反 射 分 量 ， 而 镜面 反射 颜 
色 仪 由 光源 决定 。 镜 面 反 里 分 量 仪 由 光源 决定 是 一 种 很 常见 的 做 法 ， 尤 
其 是 对 于 金属 或 “内 腕 ”的 表面 。 但是， 对 于 不 那么 内 腕 的 表面 ， 如 织物 
或 未 上 漆 的 木材 〈 甚 至 一 小 部 分 金属 ， 如 黄金 ) ， 其 镜面 高 光 部 分 都 应 
当 包 含 物体 表明 颜色 。 在 这 些 情况 下 ， 之 前 的 策略 应 该 做 适当 微调 : 


fragColor = textureColor * ( ambientLight + diffuseLight + specularLight ) 


同时 也 有 一 些 情况 下 ， 物 体 本 里 具有 ADS 材 质 ， 并 伴 有 纹理 图 像 。 
如 银 质 物体 使 用 纹理 为 表面 谎 加 一 些 氧化 痕迹 。 在 这 些 情况 下 ， 如 之 前 
半 节 中 所 讲 过 的 ， 既 用 到 光照 义 用 到 材质 的 标准 ADS 模 型 就 可 以 与 纹理 
颜色 相 结 合 ， 并 加 权 求 和 。 如 : 








textureColor = texture(sampler, texCoord) 
lightColor = (ambLight * ambMaterial) + (diffLight * diffMaterial) + specL 


ight 
fragColor = @.5 * textureColor + @.5 * lightColor 





这 种 策略 结合 了 光照 、 材 质 、 纹 理 ， 并 能 够 扩展 到 多 个 光源 以 及 多 
种 材质 的 情况 。 如 : 


texturelColor = texture(sampler1, texCoord) 
texture2Color = texture(sampler2, texCoord) 


light1iColor = (ambLight1 * ambMaterial) + (diffLight1 * diffMaterial) + sp 
ecLight1 


light2Color = (ambLight2 * ambMaterial) + (diffLight2 * diffMaterial) + sp 


ecLight2 


fragColor 4 textureiColor 
texture2Color 
light1Color 
light2Color 





17.17 (OLR) 展示 了 拥有 UV 映射 纹理 图 像 〈 来 自 Jay 
TurbervilletTU16]) 的 Studio 522 海 豚 ， 以 及 我 们 之 前 在 第 6 章 见 过 的 
NASA 航 天 飞机 模型 。 这 两 个 有 纹理 的 模型 都 使 用 了 增强 后 的 Blinn- 
Phong 光 照 ， 没 有 使 用 材质 ， 并 在 镜面 高 光 中 仅 使 用 光照 进行 计算 。 在 
这 两 幅 图 中 ， 片 段 着 色 器 中 颜色 相关 的 计算 为 : 








vec4 texColor = texture(sampler, texCoord); 


fragColor = texColor * (globalAmbient + lightAmb + lightDiff * max(dot(L,N 
),0.0)) 





+ lightSpec * pow(max(dot(H,N),@.0), matShininess*3.0); 


注意 ， 计 算 过 程 中 fragColor 可 能 产生 大 于 1.0 的 值 。 在 这 种 情况 下 ， 
OpenGL 会 将 它 限 制 回 1.0。 





图 7.17 结合 光照 与 纹理 
补充 说 明 


图 7.7 所 展示 的 面 片 着 色 的 环 面 是 通过 在 顶点 着 色 器 和 片段 着 色 器 
中 ， 将 “flat* 插 值 限 定 符 添加 到 相应 的 法 辐 量 属性 声明 中 得 到 的 。 这 样 
会 使 得 光栅 器 不 对 所 限定 的 变量 进行 插值 ， 而 是 直接 将 相同 的 值 赋 给 每 
个 睛 段 〈 在 默认 情况 下 ， 它 会 选择 三 角形 第 一 个 顶点 上 的 值 ) 。 在 
Phong 着 色 示 例 代 码 中 ， 可 以 通过 如 下 修改 实现 面 片 着 色 : 








在 顶点 着 色 器 中 


flat out vec3 varyingNormal; 





在 片段 着 色 器 中 


flat in vec3 varyingNormal ; 





我 们 还 没有 讨论 的 一 类 很 重要 的 光 是 分 布 式 光 (distributed light) 
(或 区 域 光 (area light) ) ， 这 种 光 的 光源 是 一 片区 域 而 非 一 个 单 点 。 





它 在 现实 世界 相对 应 的 例子 是 通常 在 办 公 室 或 教室 中 的 日 光 灯 管 。 有 闪 
趣 的 读者 可 以 在 0 找到 更 多 有 关 区 域 光 的 详细 信息 。 


历史 记录 


在 本 章 中 我 们 过 度 简 化 了 Gouraud 和 Phong 的 一 些 术 语 。Gouraud 着 
色 归 功 于 Gouraud 一 一 通过 计算 顶点 上 光 的 强度 并 使 用 光栅 器 对 光 强 进 
行 插值 以 生成 平滑 的 曲面 外 观 ( 有 时 也 被 称 为 “平滑 着 色 ”) 。Phong 着 
色 则 归功 于 Phong， 这 是 男 一 种 平滑 着 色 ， 对 法 同 量 插 值 并 计算 每 个 像 
素 的 光照 。Phong 同 时 也 被 认为 是 成 功 将 镜面 高 光 纳 入 平滑 着 色 的 先 张 
者 。 因 此 ，ADS 光 照 模 型 在 计算 机 图 形 学 中 也 通常 被 称 为 Phong 反 别 桂 
型 。 因 此 ， 我 们 例子 中 的 Gouraud 着 色 准 确 地 来 说 是 使 用 了 Phong 反 射 模 
型 的 Gouraud 独 色 。 由 于 Phong 的 反射 模型 在 3D 图 形 编程 中 非常 普及 ， 
通常 Gouraud 着 色 模 型 都 是 在 Phong 反 射 模 型 中 进行 展示 。 不 过 这 可 能 会 
引起 误会 ， 因 为 原本 Gouraud 在 1971 年 的 工作 中 并 没有 任何 镜面 反射 分 


i=! 


Æ o 





习题 





7.1 CUA) 修改 程序 7.1 以 使 光 能 随 鼠 标 而 移动 。 在 实现 这 个 功 
能 之 后 ， 四 处 移动 鼠标 ， 并 记录 下 镜面 高 光 的 移动 以 及 Gouraud 着 色 伪 
影 的 出 现 。 你 可 能 会 需要 在 光源 处 渲染 一 个 点 《或 者 小 物体 ) 以 便 完 成 


该 项 目 。 


7.2 ”在 程序 7.2 中 重复 练习 7.1 的 内 容 。 这 里 应 该 只 需要 将 Phong 痢 
色 的 着 色 器 放 入 练习 7.1 的 解决 方案 中 。 从 Gouraud 着 色 到 Phong 着 色 的 
进步 在 光 四 处 移动 时 应 当 更 明显 。 


7.3 《项 目 ) 修改 程序 7.2 以 使 其 包括 两 个 位 于 不 同位 置 的 位 置 
光 。 片 段 着 色 器 需要 混合 每 个 光 的 漫 反射 和 镜面 反映 分 量 。 尝 试 使 用 与 
7.6 市 所 示 相 似 的 加 权 求 和 方法 。 你 可 以 坚 试 简单 地 将 它们 加 起 来 并 限 
制 结果 不 超出 光照 值 的 上 限 。 


74 《研究 和 项 目 ) 将 程序 7.2 中 的 位 置 光 蔡 换 为 7.2 节 中 所 描述 的 
探照灯 。 答 试 设置 不 同 的 谈 光 角 、 衰 减 指 数 并 观察 其 效果 。 
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第 8 半 H 


8.1 阴影 的 重要 性 


在 第 7 章 中 ， 我 们 学 会 了 如 何 为 3D 场 景 添加 光照 。 但 是 ， 我 们 并 没 
有 真 的 添加 光线 ， 而 是 模拟 光照 在 物体 上 的 效果 一 一 使 用 ADS 模 型 一 一 
并 相应 地 调整 这 些 物体 的 绘制 方式 。 


当 我 们 用 这 种 方法 照 亮 同一 个 场景 中 的 多 个 物体 时 ， 它 的 局 限 性 就 
体现 出 来 了 。 考 虑 图 8.1 所 示 的 场景 ， 其 中 包含 了 砖 块 纹 理 环 面 以 及 地 
平面 〈 地 平面 是 一 个 巨大 立方 体 的 顶部 ， 使 用 了 来 自贡 015) 的 草地 纹 
H) 。 





图 8.1 没有 阴影 的 场景 





一 眼 望 去 我 们 的 场景 好 像 没 问 题 。 但 是 ， 和 仔细 观察 会 发 现 有 什么 重 
要 的 东西 没有 出 现 。 具 体 来 次 ， 就 是 我 们 没有 办 法 分 辨 出 环 面 距离 它 下 





方 纹理 立方 体 的 距离 。 环 面 完 竟 是 浮 在 立方 体 上 面 呢 ， 还 是 放置 在 立方 
体 顶 部 呢 ? 





我 们 无 法 回答 这 个 问题 的 原因 正 是 因为 场景 中 缺乏 阴影 。 我 们 期 户 
看 到 阴影 ， 因 为 大 脑 需要 通过 阴影 ， 才 能 针对 我 们 所 看 到 的 物体 以 及 他 
们 的 位 置 关系 构建 完整 的 心理 模型 。 





考虑 图 8.2 所 示 的 同样 的 场景 ， 不 过 添加 了 阴影 。 现 在 就 很 明显 
了 ， 左 图 中 环 面 放 在 地 平面 上 ; 而 右 图 中 ， 环 面 则 浮 于 其 上 。 





图 8.2” 带 阴影 的 光照 


8.2 ”投影 阴影 


为 了 给 3D 场 景 添加 阴影 ， 人 们 设计 了 许多 有 趣 的 方法 。 其 中 一 种 
很 适合 在 地 平面 上 《如 图 8.1 所 示 ) 绘制 阴影 ， 又 相对 不 需要 太 大 计算 
代价 的 方法 ， 叫 作 投影 阴影 (projective shadows) 。 给 定 一 个 位 于 
(X,,Y,.Z,) 的 点 光源 、 一 个 需要 泻 染 的 物体 以 及 一 个 投 册 阴影 的 平 
面 ， 可 以 通过 生成 一 个 变换 矩阵 ， 将 物体 上 的 点 〈Xw,Yw,Zw) 变换 为 相 
应 阴影 在 平面 上 的 点 X0, 。 之 后 将 其 生成 的 “阴影 多 边 形 ”绘制 出 


来 ， 通 常 使 用 上 暗色 物体 与 地 平面 纹理 混合 作为 其 纹理 ， 如 图 8.3 所 示 。 


个 光 1.21) 











(x,,0,Z,) 


图 8.3 ”投影 阴影 





使 用 投影 阴影 进行 投射 的 优点 是 它 的 高 效 和 易于 实现 。 但 是 ， 它 仅 
适用 于 平坦 表面 一 一 这 种 方法 无 法 投射 阴影 于 曲面 或 其 他 物体 。 即 使 如 
此 ， 它 仍然 适用 于 有 室外 场景 并 对 性 能 要 求 较 高 的 应 用 ， 很 多 游戏 中 的 
场景 部属 于 这 类 。 








投影 阴影 变换 矩阵 的 发 展 在 中 F834 [A51 和 以 及 区 S16 中 有 讨论 。 


8.3 ”阴影 体 


Franklin C. Crow 在 1977 年 提出 了 男 一 个 重要 的 方法 ， 这 个 方法 先 找 
到 被 物体 阴影 覆盖 的 阴影 体 ， 之 后 减少 视 体 与 阴影 体 相 交 部 分 中 的 多 边 
形 的 颜色 强度 。 图 8.4 展 示 了 阴影 体 中 的 立方 体 ， 因 此 ， 立 方 体 绘制 时 


RE. 











图 8.4 ”阴影 体 


阴影 体 的 优点 在 于 其 高 度 准 确 ， 比 起 其 他 方法 来 更 不 容易 产生 伪 
影 。 但 是 ， 计 算出 阴影 体 以 及 每 个 多 边 形 是 否 在 其 中 这 件 事 ， 即 使 对 于 
现代 GPU 来 说 ， 计 算 代价 也 很 大 。 几 何 着 色 需 可 以 用 于 计算 阴影 体 ， 杭 
板 缓冲 区 外 可 以 用 于 判断 像素 是 否 在 阴影 体内 。 有 些 显卡 对 于 特定 的 阴 
影 体 操作 优化 提供 了 便 件 支持 。 





8.4 ”阴影 贴图 





阴影 贴图 是 用 于 投射 阴影 最 实用 也 最 流行 的 方法 之 一 。 虽 然 它 并 不 
忆 是 像 明 影 体 一 样 准确 〈 且 通常 伴随 着 讨 大 的 盆 影 ，》， 但 阴影 贴图 实现 
起 来 更 简单 ， 可 以 在 各 种 情况 下 使 用 ， 并 至 有 强大 的 便 件 文 持 。 

如 果 我 们 不 在 这 里 泣 清 前 一 段 中 的 “更 简单 "这 个 词 ， 那 将 是 我 们 的 
焉 忽 。 虽 然 阴 影 贴图 比 阴影 体 〈 在 概念 和 实践 中 ) 更 简单 ， 但 它 绝 
不 “简单 ”2! 对 学 生来 说 ， 通 常 在 3D 图 形 谍 程 中 最 难 实现 的 撤 术 之 一 就 是 








阴影 贴图 。 着 色 器 程序 本 质 上 很 难 调试 ， 阴 影 贴 图 需要 几 个 组 件 和 着 色 
器 模块 的 完美 协调 。 请 注意 ， 通 过 使 用 前 面 2.2 节 中 描述 的 调试 工具 ， 
可 以 极 大 地 促进 阴影 贴图 的 成 功 实现 。 


阴影 贴图 基于 一 个 非常 简明 的 想法 : 光线 无 法 看 到 的 任何 东西 都 在 
阴影 中 。 也 就 是 说 ， 如 果 对 象 #1 阻 挡 光 到 达 对 象 #2， 等 同 于 光 不 
能 “看 到 ”对象 #2。 





这 个 想法 的 强大 之 处 在 于 我 们 已 经 有 了 方法 来 确定 物体 是 否 可 以 
被 “看 到 ”一 一 使 用 Z 绥 冲 区 的 隐藏 面 消除 算法 (HSR)〉， 如 2.1.7 节 所 
述 。 因 此 ， 计 算 阴 影 的 策略 是 ， 和 暂时 将 摄像 机 移动 到 光 的 位 置 ， 应 用 Z 
缓冲 区 HSR 算 法 ， 然 后 使 用 生成 的 深度 信息 来 计算 阴影 。 








因此 ， 谊 染 场景 需要 两 轮 : 第 1 轮 从 灯光 的 角度 泻 染 场景 (但 实际 
上 没有 将 其 绘制 到 屏幕 上 )〉 ， 第 2 轮 从 摄像 机 的 角度 演 染 场景 。 第 1 轮 的 
目的 是 从 光 的 角度 生成 Z 缓 冲 区 。 完 成 第 1 轮 之 后 ， 我 们 需要 保留 Z 绥 冲 
区 并 使 用 它 来 帮助 我 们 在 第 2 轮 生 成 阴影 。 第 2 轮 实际 绘制 场景 。 


我 们 的 策略 可 以 更 加 精炼 。 


。 《第 1 轮 ) 从 灯光 的 位 置 泻 染 场景 。 然 后 ， 对 于 每 个 像素 ， 深 度 绥 
冲 区 包含 光 与 最 近 的 对 象 之 间 的 距离 。 

。 将 深度 绥 冲 区 复制 到 单独 的 “阴影 缓冲 区 ”。 

。 (第 2 轮 ) 正 币 泻 染 场景 。 对 于 每 个 像素 ， 在 阴影 缓冲 区 中 碍 找 相 
应 的 位 置 。 如 果 相 机 到 泻 染 点 的 距离 大 于 从 阴影 缓冲 区 检索 到 的 
值 ， 则 在 该 像素 处 绘制 的 对 象 离 光 线 的 距离 ， 比 离 光 线 最 近 的 对 象 
更 远 ， 因 此 该 像素 处 于 阴影 
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方法 是 仅 泻 染 其 环境 光 ， 忽 略 其 漫 反射 和 镜面 反射 分 量 。 


上 述 方法 通常 被 称 为 "阴影 缓冲 区 ”。 而 当 我 们 在 第 二 步 中 ， 将 深度 
缓冲 区 复制 到 纹理 中 ， 则 称 为 “阴影 贴图 ”。 当 纹理 对 象 用 于 储存 阴影 深 
度 信 息 时 ， 我 们 称 其 为 阴影 纹理 ，OpenGL 通 过 sampler2DShadow 类 型 支 
持 阴 影 约 理 〈 稍 后 讨论 ) 。 这 样 ， 我 们 就 可 以 利用 片段 着 色 堪 中 纹理 单 
元 和 采样 器 变量 〈 即 “纹理 贴图 ”) 的 硬件 支持 功能 ， 在 第 2 轮 快 速 执行 
深度 查找 。 我 们 现在 修改 的 策略 是 : 





© (第 1 轮 ) 与 之 前 相同 ; 
。 将 深度 绥 冲 区 的 内 容 复 制 进 纹 理 对 象 ; 
。 《第 2 轮 ) 与 之 前 相同 ， 不 过 阴影 缓冲 区 变 为 阴影 纹理 。 


现在 我 们 来 实现 这 些 步 又 。 


8.4.1 阴影 贴图 〈 第 1 轮 ) 一 从 光源 位 置 “ 绘 
制 ” 物 体 


在 第 一 步 中 ， 我 们 首先 将 相机 移动 到 灯光 的 位 置 然后 渔 染 场景 。 我 
们 的 目标 不 是 在 显示 此 上 实际 绘制 场景 ， 而 是 完成 足够 的 泻 染 过 程 以 正 
确 填充 深度 缓冲 区 。 因 此 ， 没 有 必要 为 像素 生成 闫 色 ， 我 们 的 第 一 这 将 
仅 使 用 顶点 着 色 器 ， 但 片段 着 色 器 不 执行 任何 操作 。 





当然 ， 移 动 相机 需要 构建 适当 的 观察 和 窍 阵 。 根 据 场景 的 内 容 ， 我 们 
需要 在 光源 处 依 合 适 的 方向 来 看 场景 。 通 常 ， 我 们 希 户 此 方 同 刘 问 最 终 


在 第 2 轮 中 呈现 的 区 域 。 





这 个 方向 通 第 依 场景 而 定 一 一 在 我 们 的 场景 中 ， 我 们 通常 会 将 相机 
从 光源 指 问 原 后 。 


第 1 轮 中 有 几 个 需要 处 理 的 重要 细节 。 


。 配置 缓冲 区 和 阴影 纹理 。 

。 禁用 颜色 输出 。 

。 从 光源 到 视野 中 的 物体 构建 一 个 LookAt 和 矩阵 。 

。 启用 GLSL 第 1 轮 着 色 器 程序 ， 该 程序 仅 包 含 图 8.5 中 的 简单 顶点 着 
色 器 ， 准 备 接收 MVP 和 矩阵 。 在 这 种 情况 下 ，MVP 和 拢 阵 将 包括 对 象 
的 模型 矩阵 M、 前 一 步 中 计算 的 LookAt 和 矩阵 (作为 观察 矩阵 V》， 
以 及 透视 矩阵 P。 我 们 将 该 MVP 和 矩阵 称 为 “shadowMVP”， 因 为 它 是 
基于 光 而 不 是 相机 的 观察 点 。 由 于 实际 上 没有 显示 来 自 光 源 的 视 
图 ， 因 此 第 1 轮 着 色 器 程序 的 片段 着 色 器 不 会 执行 任何 操作 。 








#version 430 /顶点 着 色 器 
layout (location=0) in vec3 vertPos; 
uniform mat4 shadowMVP; 


void main(void) 


{ gl_Position = shadowMVP * vec4(vertPos, 1.0); 
} 


#version 430 /片段 着 色 器 
void main(void) {} 





图 8.5 ”阴影 贴图 第 1 轮 的 顶点 着 色 器 和 片段 着 色 器 





。 为 每 个 对 象 创 建 shadowMVP 和 矩阵 ， 并 调用 glDrawArrays0。 第 1 轮 中 
不 需要 包含 纹理 或 光照 ， 因 为 对 象 不 会 演 染 到 屏幕 上 。 





8.4.2 ”阴影 贴图 (中间 步骤 ) 一 一 将 Z 绥 种 区 复 
制 到 纹理 

OpenGL 提 供 了 两 种 将 Z 绥 冲 区 深度 数据 放 入 纹理 单元 的 方法 。 第 一 
种 方法 是 生成 空 阴影 纹理 ， 然 后 使 用 命令 glCopyTexImage2D() 将 活动 深 
度 绥 冲 区 复制 到 阴影 纹理 中 。 








第 二 种 方法 是 在 第 1 轮 中 构建 一 个 “ 自 定义 帧 缓冲 区 ”( 而 不 是 使 用 
默认 的 Z 绥 冲 区 ) ， 并 使 用 命令 glFrameBufferTexture() 将 阴影 纹理 附加 
到 它 上 和 面 。OpenGL 在 3.0 版 中 引入 该 命令 ， 以 进一步 支持 阴影 纹理 。 使 
用 这 种 方法 时 ， 无 须 将 Z 缓 冲 区 “复制 ?到 纹理 中 ， 因 为 缓冲 区 已 经 附加 
了 纹理 ， 深 度 信 息 由 OpenGL 目 动 放 入 纹理 中 。 我 们 将 在 实现 中 使 用 这 








种 方法 。 


请 染 市 阴影 的 场 





8.4.3 阴影 贴图 〈 第 2 轮 ) 
K 
第 2 轮 中 的 大 部 分 内 容 与 我 们 在 第 7 章 中 看 到 的 类 似 ， 即 我 们 在 这 里 
泻 染 完 整 的 场景 及 其 中 的 所 有 物体 ， 以 及 光照 、 材 质 和 装饰 场景 中 物体 
的 纹理 。 同 时 ， 我 们 还 需要 添加 必要 的 代码 ， 以 确定 每 个 像素 是 否 在 阴 
第 2 轮 的 一 个 重要 特征 是 它 使 用 了 两 个 MVP 窍 阵 。 一 个 是 将 对 象 坐 
标 转换 为 屏幕 坐标 的 标准 MVP 和 矩阵 〈 如 我 们 之 前 的 大 多 数 示 例 所 示 ) 。 





另 一 个 是 在 第 1 轮 中 生成 的 shadowMVP 和 矩阵 ， 用 于 从 光源 的 角度 进行 洽 


现在 将 在 第 2 轮 中 用 于 从 阴影 纹理 中 得 找 深度 信息 。 


染 





在 第 2 轮 中 ， 从 纹理 贴图 尝试 查找 像素 时 ， 和 情况 比较 复杂 。OpenGL 
相机 使 用 [-1...+ 1] 坐 标 空 间 ， 而 纹理 贴图 使 用 [0...1] 空 间 。 常 见 的 解决 
方案 是 构建 一 个 额外 的 矩阵 变换 ， 通 常 称 为 B， 它 将 用 于 从 摄像 机 空间 
到 纹理 空间 的 转换 (或 “偏离 ?，biases， 因 此 名 称 ) 。 得 到 B 的 过 程 很 简 
单一 一 先 缩放 为 12， 再 平移 1/2。 


JERE BU F: 


0.5 0 0 0.5 
0 0.5 0 0.5 
0 0 05 0.5 
0 0 0 l 


B = 


之 后 将 B 合 并 入 shadowMVP 和 矩阵 以 备 在 第 2 轮 中 使 用 ， 如 下 : 
shadowMVP2 = [B][shadowMVP (pass1)| 
假设 我 们 使 用 阴影 纹理 附加 到 我 们 的 上 自 定 义 帧 缓冲 区 的 方法 ， 
OpenGL 提 供 了 一 些 相对 简单 的 工具 ， 用 于 确定 绘制 对 象 时 ， 像 系 是 否 
处 于 阴影 中 。 以 下 是 第 二 阶段 处 理 的 详细 信息 摘要 。 





。 构建 变换 矩阵 B， 用 于 从 光照 空间 转换 到 纹理 空间 [更 合适 在 initO 中 
进行 ]。 

。 局 用 阴影 纹理 以 进行 查找 。 

。 启用 颜色 输出 。 

。 启用 GLSL 第 2 轮 演 染 程序 ， 包 含 顶 点 着 色 器 和 片段 着 色 嚣 。 

。 根据 摄像 机 位 置 〈 正 常 ) 为 正在 绘制 的 对 象 构建 MVP 秆 阵 。 


e 构建 shadowMVP2 和 矩阵 (包含 B 和 矩阵 ， 如 前 所 述 ) 一 一 着 色 器 将 需 
要 用 它 查 找 阴影 纹理 中 的 像素 坐标 。 

将 生成 的 矩阵 变换 发 送 到 着 色 器 统一 变量 。 

像 往常 一 样 启 用 包含 项 点、 法 向 量 和 纹理 坐标 《如果 使 用 ) 的 缓冲 
区 。 

调用 glDrawArrays()。 


除了 泻 染 任务 外 ， 顶 点 和 片段 着 色 器 还 需要 额外 承担 一 些 任务 。 


顶点 着 色 器 将 顶点 位 置 从 相机 空间 转换 为 光照 空间 ， 并 将 结果 坐标 
发 送 到 顶点 属性 中 的 片段 着 色 器 ， 以 便 对 它们 进行 插值 。 这 样片 段 
着 色 器 可 以 从 阴影 纹理 中 检索 正确 的 值 。 

片段 着 色 器 调用 textureProj0) 函 数 ， 该 函数 返回 0 或 1， 指 示 像 素 是 否 
处 于 阴影 中 《所 涉及 的 机 制 将 在 后 面 解释 ) 。 如 果 它 在 阴影 中 ， 则 
着 色 器 通过 剔除 其 漫 反 射 和 镜面 反射 分 量 来 输出 更 暗 的 像素 。 











阴影 贴图 是 一 种 常见 任务 ， 因 此 GLSL 为 其 提供 了 一 种 特殊 类 型 的 
采样 器 变量 ， 称 为 sampler2DShadow (如 前 所 述 ) ， 可 以 附加 到 C++ / 
OpenGL 应 用 程序 中 的 阴影 纹理 。textureProj() 函 数 用 于 从 阴影 纹理 中 查 
找 值 ， 它 类 似 于 我 们 之 前 在 第 5 章 中 看 到 的 texture0， 其 区 别 是 除了 
textureProjO 函 数 使 用 vec3 来 索引 纹理 而 不 是 通 香 的 vec2。 由 于 像素 坐标 
是 vec4， 因 此 需要 将 其 投影 到 2D 纹 理 空 间 上 ， 以 便 在 阴影 纹理 贴图 中 查 
找 深度 值 。 正 如 我 们 将 在 下 面 看 到 的 ，textureProj( 为 完成 了 这 些 功 能 。 


顶点 着 色 器 和 片段 着 色 器 代码 的 其 余部 分 实现 了 Blinn-Phong 着 色 。 
这 些 着 色 器 如 图 8.6 和 图 8.7 所 示 ， 并 增加 了 阴影 贴图 的 代码 。 


#version 430 
layout (location=0) in vec3 vertPos; 
layout (location=1) in vec3 vertNormal; 


out vec3 varyingNormal, varyingLightDir, varyingVertPos, varyingHalfVec; 


struct PositionalLight { vec4 ambient, diffuse, specular; vec3 position; }; 
struct Material { vec4 ambient, diffuse, specular; float shininess; }; 

uniform vec4 globalAmbient; 

uniform PositionalLight light;  / 假设 光源 位 置 以 视觉 空间 坐标 表示 
uniform Material material; 

uniform mat4 mv_matrix; 

uniform mat4 proj_matrix; 

uniform mat4 norm_matrix; 


void main(void) 

{  varyingVertPos = (mv_matrix * vec4(vertPos,1.0)).xyz; 
varyingLightDir = light.position - varyingVertPos; 
varyingNormal = (norm_matrix * vec4(vertNormal,1.0)).xyz; 
varyingHalfVec = (varyingLightDir - varyingVertPos).xyz; 


gl_Position = proj_matrix * mv_matrix * vec4{vertPos,1.0); 








图 8.6 ”阴影 贴图 第 2 轮 顶点 着 色 器 








让 我 们 更 仔细 地 研究 一 下 如 何 使 用 OpenGL 来 执行 正在 泻 染 的 像 系 
和 阴影 纹理 中 的 值 之 间 的 深度 比较 。 首 先 ， 从 顶点 着 色 器 开始 ， 在 模型 
空间 中 使 用 顶点 坐标 ， 我 们 将 其 与 shadowMVP2 相 乘 以 生成 阴影 纹理 坐 
标 ， 这 些 坐标 对 应 于 投影 到 光照 空间 中 的 顶点 坐标 ， 是 之 前 从 光源 的 视 
角 生 成 的 。 经 过 插值 后 的 《3D) 光照 空间 坐标 xyz) ERRE at 
中 使 用 如 下 。z 分 量 表示 从 光 到 像素 的 距离 。 xy) 分 量 用 于 检索 存储 
E QOD) 阴影 纹理 中 的 深度 信息 。 将 该 检索 的 值 〈《 到 最 靠近 光 的 物体 
的 距离 ) 与 ?进行 比较 。 该 比较 产生 “二 元 结果， 告诉 我 们 我 们 正在 泻 
染 的 像 妹 是 否 比 最 接近 光 的 物体 离 光 更 远 〈 即 像素 是 人 否 处 于 阴影 中 ) 。 











假设 光源 位 置 以 视觉 空间 坐标 表示 。 


与 顶点 着 色 右 相同 的 结构 体 和 统一 变量 。 


如 果 我 们 在 OpenGL 中 使 用 前 面 介 绍 过 的 glFrameBufferTextureO 并 
启用 深度 测试 ， 然 后 使 用 片段 着 色 器 〈 见 图 8.7) 的 sampler2DShadow 和 
textureProjO0， 所 演 染 的 结果 将 完全 满足 我 们 的 需求 。 即 textureProjO 将 
输出 0.0 或 1.0， 具 体 取 决 于 深度 比较 。 基 于 此 值 ， 当 像素 离 光 源 比 离 光 
源 最 近 的 物体 更 远 时 ， 我 们 可 以 在 片段 着 色 器 中 忽略 漫 反 射 和 镜面 反射 
分 量 ， 从 而 有 效 地 创建 阴影 。 概 述 如 图 8.8 所 示 。 








#version 430 
in vec3 varyingNormal, varyingLightDir, varyingVertPos, varyingHalfVec; 


out vec4 fragColor; 

/ 与 顶点 着 色 器 相同 的 结构 体 和 统一 变量 
void main(void) 

{ vec3 L= normalize(varyingLightDir); 


vec3 N = normalize(varyingNormal); 
vec3 V = normalize(-varyingVertPos); 


vec3 H = normalize(varyingHalfVec); 


fragColor = globalAmbient * material.ambient + light.ambient * material.ambient; 
light.diffuse * material.diffuse * max(dot(L,N),0.0) 
+ light.specular * material.specular 
* pow(max(dot(H,N),0.0),material.shininess*3.0); 








图 8.7 ”阴影 贴图 第 2 轮 片 段 着 色 器 








tex Coord: 


EP Tele zev? 


= 





nem 一 一 


if z <= V return 1.0, else return 0.0 





图 8.8 ”自动 深度 比较 


我 们 现在 准备 构建 Ct+/ OpenGL 应 用 程序 以 使 用 上 述 着 色 器 。 





8.5 ”阴影 贴图 示例 


考虑 图 8.9 中 包含 环 面 和 金字 塔 的 场景 。 位 置 光源 放置 在 左 侧 《〈 注 
意 镜 面 高 光 ) o 





图 8.9 有 光照 无 阴影 的 场景 





金字 塔 应 该 在 环 面 上 投下 阴影 。 





为 了 阐明 示例 的 开发 ， 我 们 的 第 一 步 是 将 第 1 轮 谊 染 到 屏 医 以 确保 
它 正 常 工作 。 为 此 ， 我 们 将 临时 添加 一 个 简单 的 片段 着 色 器 《〈 它 不 会 包 
含 在 最 终 版 本 中 )〉 并 在 第 1 轮 中 仪 输 出 一 种 固定 颜色 如 红色 〉; Bil 
如 : 





#version 430 
out vec4 fragColor; 


void main(void) 
{ fragColor = vec4(1.0, 0.0, 0.0, 90.0); 
} 





让 我 们 假设 场景 的 原点 位 于 图 的 中 心 在 金字 塔 和 环 面 之 间 。 在 第 1 
轮 中 ， 我 们 将 相机 放 在 光源 的 位 置 (图 8.10 中 的 左 图 ) 并 指向 
(0,0,0) 。 然 后 我 们 用 红色 绘制 对 象 ， 它 会 产生 如 图 8.10《〈 见 彩 插 ) A 
图 所 示 的 输出 。 注 意 金字 塔 顶 部 附近 的 环 面 一 一 这 个 制高点 附近 的 环 面 
部 分 位 于 金字 塔 后 面 。 





< 


`~ 





图 8.10 第 1 轮 : 场景 ( 左 ) 和 从 光源 视角 演 染 的 场景 〈 右 ) 











包含 光照 与 阴影 贴图 的 完整 第 2 轮 C++/OpenGL 代 码 见 程序 8.1。 


程序 8.1 ”阴影 贴图 














// 大 部 分 与 之 前 相同 。 高 亮 部 分 代码 是 新 加 入 的 ， 用 以 实现 阴影 




















// 实现 光照 所 需 的 大 部 分 引用 需要 在 代码 开始 引入 ， 与 之 前 相同 
// 因此 不 在 这 里 重复 
































// 在 这 里 定义 演 染 程序 所 用 的 变量 、 绥 冲 区 、 着 色 器 源 代 码 等 








ImportedModel pyramid("pyr.obj"); // 定义 金字 塔 
Torus myTorus(@.6f, @.4f, 48); // 定义 环 面 
int numPyramidVertices, numTorusVertices, numTorusIndices; 





// 环 面 、 金 字 塔 、 相 机 和 光源 的 位 置 
glm: :vec3 torusLoc(1.6f, 0.0f, -0.3f); 
glm: :vec3 pyrLoc(-1.0f, 0.1f, 0.3f); 

glm: :vec3 cameraLoc(@.0f, 0.2f, 6.0f); 
glm: :vec3 lightLoc(-3.8f, 2.2f, 1.1); 




















// 场景 中 所 使 用 白光 的 属性 (全 局 光 和 位 置 光 ) 

float globalAmbient[4] = { 6.7f，6.7f，6.7f，1.6f }; 
float lightAmbient[4] = { 0.0f, 0.0f, 0.0f, 1.6f }; 
float lightDiffuse[4] = { 1.0f, 1.0f, 1.0f, 1.6f }; 
float lightSpecular[4] = { 1.0f, 1.0f, 1.0f, 1.6f }; 














// 金字 塔 的 黄金 材质 
float* goldMatAmb 





Utils::goldAmbient(); 
float* goldMatDif = Utils::goldDiffuse(); 
float* goldMatSpe = Utils::goldSpecular(); 
float goldMatShi = Utils::goldShininess(); 








// 环 面 的 青铜 材质 

float* bronzeMatAmb = Utils::bronzeAmbient(); 
float* bronzeMatDif = Utils: :bronzeDiffuse(); 
float* bronzeMatSpe = Utils: :bronzeSpecular(); 
float bronzeMatShi = Utils: :bronzeShininess(); 
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// 在 display() 中 将 光照 传 入 着 色 器 的 变量 
float curAmb[4], curDif[4], curSpe[4], matAmb[4], matDif[4], matSpe[4]; 
float curShi, matShi; 








// 阴影 相关 变量 

int screenSizeX, screenSizeY; 
GLuint shadowTex, shadowBuffer; 
glm::mat4 lightVmatrix; 
glm::mat4 lightPmatrix; 

glm: :mat4 shadowMVP1; 

glm: :mat4 shadowMVP2; 

glm: :mat4 b; 

















// 3h ie CRAY Amat 4 ED A Sy A Le PE FY AR (mMat, vMat Se) 
// 其 他 在 415p12y PALBERIM ORR ATE CIE 












































int maineveid) { 
// 与 前 例 相 同 ， 无 改动 
} 


// init() 函 数 依 然 执行 调用 以 编译 着 色 器 并 初始 化 物体 
// 同时 它 也 调用 setupShadowBuffers() 函 数 以 初始 化 明 影 贴图 相关 缓冲 区 
// 最 后 ， 它 构造 B 和 矩阵 以 进行 从 光照 空间 到 纹理 空间 的 转换 









































void init(GLFWwindow* window) { 

renderingProgram1 = Utils::createShaderProgram("./vertiShader.gls1", " 
/fragiShader.gls1"); 

renderingProgram2 = Utils::createShaderProgram("./vert2Shader.glsl1", 
/frag2Shader.gls1"); 


setupVertices(); 
setupShadowBuffers() ; 


b = glm::mat4( 
86.5f，6.6f，6.6f，6.6f， 
86.6f，6.5f，6.6f，6.6f， 
86.6f，6.6f，6.5f，6.6f， 
Q.5f, O.5f, @.5f, 1.0Ff); 


} 


void setupShadowBuffers(GLFWwindow* window) { 
glfwGetFramebufferSize(window, &width, &height) ; 
screenSizexX = width; 
screenSizeY = height; 





// 创建 自 定义 帧 缓冲 区 
glGenFramebuffers(1, &shadowBuffer); 

















// 创建 表 影 纹理 并 让 它 存储 深度 信息 
// 这 些 步 又 与 程序 5 .2 中 相似 
glGenTextures(1, &shadowTex); 
glBindTexture(GL TEXTURE 2D, shadowTex); 
glTexImage2D(GL TEXTURE 2D, ©, GL_DEPTH_COMPONENT32, 

screenSizeX, screenSizeY, ©, GL DEPTH COMPONENT, GL_FLOAT, 0); 
glTexParameteri(GL_TEXTURE_2D, GL TEXTURE MIN FILTER, GL_LINEAR); 
glTexParameteri(GL TEXTURE 2D, GL TEXTURE MAG FILTER, GL_LINEAR); 
glTexParameteri(GL TEXTURE 2D, GL TEXTURE COMPARE MODE, GL_COMPARE_REF_ 

TO_TEXTURE ) ; 

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_COMPARE_FUNC, GL_LEQUAL); 

















} 


void setupVertices(void) { 
// 与 之 前 的 例子 相同 。 这 个 函数 用 来 创建 VAO 和 VBO 
// 之 后 将 环 面 及 金字 塔 的 顶点 与 法 向 量 读 入 缓冲 区 






































} 


// display() 函 数 分 别管 理 第 1 轮 需 要 使 用 的 自 定 义 帧 缓冲 区 
// 以 及 第 2 轮 需 要 使 用 的 阴影 纹理 初始 化 过 程 。 阴 影 相 关 新 功能 已 高 亮 





























void display(GLFWwindow* window, double currentTime) { 
glClear(GL COLOR BUFFER BIT); 
glClear(GL_DEPTH_BUFFER BIT); 























// 从 光源 视角 初始 化 视觉 矩阵 以 及 透视 矩阵 ， 以 便 在 第 1 轮 中 使 用 

lightVmatrix = glm::lookAt(currentLightPos, origin, up); // 从 光源 到 原点 
的 矩阵 

lightPmatrix = glm: :perspective(toRadians(66.6f)，aspect，6.1f，1666.6f 



























































) ; 
// 使 用 自 定义 帧 缓冲 区 ， 将 阴影 纹理 附着 到 其 上 
glBindFramebuffer(GL_FRAMEBUFFER, shadowBuffer); 
glFramebufferTexture(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, shadowTex, @); 
// 关闭 绘制 颜色 ， 同 时 开启 深度 计算 
glDrawBuffer(GL_NONE); 
glEnable(GL_DEPTH_TEST); 
passOne(); 
// 使 用 显示 缓冲 区 ， 并 重新 开启 绘制 
gl1BindFramebuffer(GL_FRAMEBUFFER, @); 
glActiveTexture(GL_TEXTURE®@) ; 
glBindTexture(GL_TEXTURE_2D, shadowTex) ; 
glDrawBuffer (GL FRONT); // 重新 开启 绘制 颜色 
passTwo(); 

} 


// 接 下 来 是 第 1 轮 和 第 2 轮 的 代码 
// 这 些 代 码 和 之 前 的 大 体 相 同 
// 与 阴影 相关 的 新 增 代码 已 高 之 


























void passOne(void) { 











// renderingProgram1l 包 含 了 第 1 轮 中 的 顶点 着 色 器 和 片段 着 色 器 


glUseProgram(renderingProgram1); 








// 接 下 来 的 代码 段 通过 从 光源 角度 泻 染 环 面 获得 深度 缓冲 区 





mMat = glm::translate(glm::mat4(1.@f), torusLoc) ; 
// 轻微 旋转 以 便 查 看 
mMat = glm::rotate(mMat, toRadians(25.@f), glm::vec3(1.0f, 0.0f, 68.6f)) 























// 我 们 从 光源 角度 绘制 ， 因 此 使 用 光源 的 Pp、V 和 矩阵 

shadowMVP1 = lightPmatrix * lightVmatrix * mMat; 

sLoc = glGetUniformLocation(renderingProgram1, "shadowMVP"); 
glUniformMatrix4fv(sLoc, 1, GL FALSE, glm::value ptr(shadowMVP1)); 
































// 在 第 1 轮 中 我 们 只 需要 环 面 的 顶点 缓冲 区 ， 而 不 需要 它 的 纹理 或 法 向 量 
glBindBuffer(GL_ARRAY_BUFFER, vbo[ð]); 
glVertexAttribPointer(@, 3, GL_FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray(@) ; 





glClear(GL_DEPTH_BUFFER BIT); 
glEnable(GL_CULL_FACE); 
glFrontFace(GL_CCw); 
glEnable(GL_DEPTH_TEST); 
glDepthFunc(GL_LEQUAL) ; 


glBindBuffer(GL_ELEMENT ARRAY _BUFFER, vbo[4]); // vbo[4] 包含 环 面 





索引 


} 


glDrawElements(GL_TRIANGLES, numTorusIndices, GL_UNSIGNED_INT, @); 

















// 对 金字 塔 做 同样 的 处 理 ( 但 不 清除 GL_DEPTH_BUFFER_BIT) 
// 金字 塔 没 有 索引 ， 因 此 我 们 使 用 glDrawArrays() 而 非 glDrawElements() 
































glDrawArrays(GL_TRIANGLES, ©, numPyramidVertices) ; 


void passTwo(void) { 











glUseProgram(renderingProgram2) ; // 第 2 轮 顶点 着 色 器 和 片段 着 色 器 














// 绘制 环 面 ， 这 次 我 们 需要 加 入 光照 、 材 质 、 法 向 量 等 

// 同时 我 们 需要 为 相机 空间 以 及 光照 空间 都 提供 MVP 变 换 

mvLoc = glGetUniformLocation(renderingProgram2, "mv_matrix"); 
projLoc = glGetUniformLocation(renderingProgram2, “proj_matrix"); 
nLoc = glGetUniformLocation(renderingProgram2, "norm matrix"); 
sLoc = glGetUniformLocation(renderingProgram2, "shadowMVP") ; 



































// 环 面 是 黄 铜 材质 
curAmb[@] = bronzeMatAmb[6]; curAmb[1] = bronzeMatAmb[1]; curAmb[2] 
bronzeMatAmb[ 2]; 
curDif[@] = bronzeMatDif[@]; curDif[1] = bronzeMatDif[1]; curDif[2] 
bronzeMatDif[2]; 
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curSpe[@] = bronzeMatSspe[6]; curSpe[1] = bronzeMatSpe[1]; curSpe[2] 


bronzeMatSpe[2]; 
curShi = bronzeMatShi; 


vMat = glm::translate(glm::mat4(1.0f), glm::vec3(-cameraLoc.x, -cameraL 


-y, -CameraLoc.z)); 


currentLightPos = glm::vec3(lightLoc) ; 
installLights(renderingProgram2, vMat); 


mMat = glm::translate(glm::mat4(1.@f), torusLoc) ; 
// 轻微 旋转 以 便 查 看 


mMat = glm::rotate(mMat, toRadians(25.6f), glm::vec3(1.0f, 0.0f, 68.6f)) 





// 构建 相机 视角 环 面 的 MV 和 矩阵 
mvMat = VMat * mMat; 
invTrMat = glm::transpose(glm::inverse(mvMat) ) ; 





// 构建 光源 视角 环 面 的 MV 和 矩阵 
shadowMVP2 = b * lightPmatrix * lightVmatrix * mMat; 
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// 将 MY 以 及 PROJ 窍 阵 传 入 相应 的 统一 变量 
glUniformMatrix4fv(mvLoc, 1, GL_FALSE, glm::value ptr(mvMat)); 
glUniformMatrix4fv(projLoc, 1, GL_ FALSE, glm::value ptr(pMat)); 
glUniformMatrix4fv(nLoc, 1, GL_ FALSE, glm::value_ptr(invTrMat) ) ; 
glUniformMatrix4fv(sLoc, 1, GL_FALSE, glm::value_ptr(shadowMVP2) ) ; 

















// 初始 化 环 面 项 点 和 法 向 量 缓冲 区 () 
glBindBuffer(GL_ARRAY_BUFFER，vbo[6]); // 环 面 顶点 
glVertexAttribPointer(@, 3, GL_FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray(@) ; 





























glBindBuffer(GL_ARRAY_BUFFER, vbo[2]); // 环 面 法 向 量 
glVertexAttribPointer(1, 3, GL FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray(1) ; 














glClear(GL_DEPTH_BUFFER BIT); 
glEnable(GL_CULL_FACE); 
glFrontFace(GL_CCw); 
glEnable(GL_DEPTH_TEST); 
glDepthFunc(GL_LEQUAL) ; 














glDrawElements(GL_TRIANGLES, numTorusIndices, GL_UNSIGNED_INT, @); 





// BR Gee PE HG FRSE 





glBindBuffer(GL_ELEMENT ARRAY BUFFER, vbo[4]); // vbo[4] 包 含 环 面 索 


Pe 


程序 8.1 展 示 了 与 之 前 详 述 过 的 第 1 轮 、 第 2 轮 着 色 器 交互 部 分 的 C++ 
/OpenGL 应 用 程序 。 之 前 已 经 展示 过 的 模块 ， 如 读 取 着 色 器 、 编 译 着 色 
髓 、 构 建 模型 及 相关 缓冲 区 、 在 着 色 回 中 初始 化 位 置 光 源 ADS 特 性 以 及 
进行 透视 窃 阵 和 LookAt 和 矩阵 计算 等 ， 这 些 模块 同 之 前 一 样 。 


8.6 PASM ya 


虽然 我 们 已 经 实现 了 为 场景 添加 阴影 的 所 有 基本 要 求 ， 但 运行 程序 





8.1 会 产生 错 杂 的 结果 ， 如 图 8.11 所 示 。 





图 8.11 BABA “ae” 





好 消息 是 我 们 的 金字 塔 现在 在 环 面 上 投下 阴影 ! 坏 消 息 则 是 ， 这 种 
成 功 伴随 着 严重 的 伪 影 。 有 许多 波浪 线 窗 新 在 场景 中 的 表面 。 这 是 阴影 
贴图 的 和 常见 副作用 ， 称 为 明 影 痉 闪 ERAH, shadow acne) 或 
昔 误 的 自 阴 影 。 

SA a ee re FR ET) A AR Ze SI EE. EHA AH 











深度 信息 时 计算 的 纹理 坐标 通常 与 实际 坐标 不 完全 匹配 。 因 此 ， 从 阴影 
纹理 中 查找 到 的 深度 值 可 能 并 非 当前 演 染 中 像素 的 深度 ， 而 是 相 邻 像素 
的 深度 。 如 果 相 邻 像 素 在 更 远 位 置 ， 则 当前 像素 会 被 错误 地 显示 为 阴 


IRZ o 








明 影 竣 疮 也 会 由 纹理 贴图 和 深度 计算 之 间 的 精度 差 引 起 。 这 也 可 能 
导致 舍 入 误 兰 ， 并 造成 对 像 系 是 否 处 于 阴影 中 的 误 判 。 














池 运 的 是 ， 阴 影 竣 疮 很 容易 修复 。 由 于 阴影 痒 疮 通常 发 生 在 没有 阴 
影 的 表面 上 ， 这 里 有 个 简单 的 技巧 ， 在 第 1 轮 中 将 每 个 像素 稍微 移 同 光 
源 ， 之 后 在 第 2 轮 将 它们 移 回 原 位 。 通 常 ， 这 么 做 足以 补偿 各 类 舍 入 误 
差 。 在 我 们 的 实现 中 简单 地 在 display0 函 数 中 调用 glPolygon- Offset() Ep 
可 ， 如 图 8.12 所 示 《 突 出 显示 部 分 ) 。 





void display(GLFWwindow* window, double currentTime) { 
W/ 像 前 面 一 样 清除 深度 缓冲 区 和 颜色 缓冲 区 


/ 像 前 面 一 样 为 相机 和 光源 视角 设置 变换 矩阵 


glBindFramebuffer(GL_| FRAMEBUFFER, shadowBuffer); 
glFramebufferTexture(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT,shadowTex, 0); 


glDrawBuffer(GL_NONE); 
glEnable(GL_DEPTH_TEST); 


/ F/I Ly BA 影 伪 影 


passOne(); 


glDisable(GL_POLYGON_OFFSET_FILL); 
glBindFramebuffer(GL_FRAMEBUFFER, 0); 
glActiveTexture(GL_TEXTURE0); 
glBindTexture(GL_TEXTURE_2D, shadowTex); 
glDrawBuffer(GL_FRONT); 


passTwo(); 





图 8.12 5 BARRE ARS 
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图 8.13 所 示 。 还 要 注意 ， 随 着 伪 影 的 消失 ， 现 在 可 以 看 到 环 面 的 内 圆 在 
其 目 身 上 显示 了 一 个 正确 的 小 阴影 。 











图 8.13 ” 演 染 带 阴 影 的 场景 





虽然 修复 阴影 痉 疮 很 容易 ， 但 有 时 修复 会 引起 新 的 伪 影 。 在 第 1 轮 
之 前 移动 对 象 的 “技巧 "有 时 会 导致 在 对 象 阴影 中 出 现 间 险 。 图 8.14 显 示 
了 一 个 这 样 的 例子 。 这 种 伪 影 通 弟 被 称 为 "Peter Panning”, ALAA IE 
会 导致 静止 物体 的 阴影 与 物体 底部 分 离 的 问题 〈 从 而 使 物体 的 阴影 部 分 
与 了 明 影 的 其 余部 分 分 离 ， 让 人 想起 詹姆斯 : 马 修 : 巴 利 笔下 的 角色 Peter 
PanlPPI6]) 。 修 复 此 伪 影 需要 调整 glPolygonOffsetO 的 参数 。 如 果 它 们 太 
小 ， 就 会 出 现 阴影 冯 郊 ， 如 果 太 大 ， 则 会 出 现 Peter Panning. 








图 8.14 ”修复 引起 新 的 伪 影 





在 实现 阴影 贴图 时 可 能 会 发 生 许多 其 他 伪 影 。 如 重复 阴影 ， 因 为 在 
第 1 轮 〈 存 入 阴影 缓冲 区 时 ) 演 染 的 场景 区 域 与 第 2 轮 中 泻 染 的 场景 区 域 
不 同 《〈 来 目 不 同 的 观 峙 位 置 ) 。 这 种 差异 可 能 导致 在 第 2 轮 中 演 染 的 场 
景 中 ， 某 些 区 域 尝试 使 用 范围 [0...1] 之 外 的 特征 坐标 来 访问 阴影 纹理 。 
回想 一 下 ， 在 这 种 情况 下 默认 行为 是 GL_REPEAT， 因 此 ， 这 可 能 导致 
错误 的 重复 阴影 。 





一 种 可 能 的 解决 方案 是 将 以 下 代码 行 添 加 到 setupShadowBuffers()， 
将 纹理 换行 模式 设置 为 “ 夹 紧 到 边缘 ”。 


glTexParameteri(GL TEXTURE 2D, GL_TEXTURE_WRAP_S, GL _ CLAMP_ TO_EDGE); 


glTexParameteri(GL TEXTURE 2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO EDGE); 





这 样 纹理 边缘 以 外 的 值 会 被 限制 为 边缘 处 的 值 〈 而 非 重 复 ) HE 
意 ， 这 种 方法 上 自身 也 有 可 能 造成 伪 影 ， 即 当 阴 影 约 理 的 边缘 处 存在 阴影 
时 ， 截 取 边 缘 可 能 产生 延伸 到 场景 边缘 的 “阴影 条 ”。 
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冲 区 可 以 准确 表示 的 阴影 时 ， 就 有 可 能 出 问题 。 通 常 ， 这 取决 于 场景 中 
物体 和 灯光 的 位 置 。 尤 其 当 光 源 在 距离 物体 较 远 时 ， 更 容易 发 生 。 一 个 
例子 如 图 8.15 所 示 。 





图 8.15 ”锯齿 状 阴影 边缘 


消除 锯齿 状 阴影 边缘 就 没有 处 理 之 前 的 伪 影 那么 简单 了 。 一 种 技术 
古 在 第 1 轮 期 间 将 光 位 置 移动 到 更 接近 场景 的 位 置 ， 然 后 在 第 2 轮 放 回 原 
始 位 置 。 妨 一 种 第 用 的 有 效 方法 则 是 我 们 将 在 下 面 讨论 的 “ 采 和 阴影 ” 方 
TRL 
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都 会 发 生 不 同 程 度 的 模糊 。 在 本 节 中 ， 我 们 将 探讨 现实 世界 中 柔和 阴影 


的 外 观 ， 然 后 描述 在 OpenGL 中 模拟 它们 的 种 用 算法 。 消 除 锯齿 状 阴影 
边缘 并 不 像 处 理 之 前 的 伪 影 那么 简单 。 


8.7.1 现实 世界 中 的 和 柔和 阴影 


柔和 阴影 的 成 因 有 很 多 ， 同 时 也 有 许多 类 型 的 柔和 阴影 。 通 第 在 自 
然 界 中 产生 柔和 阴影 原因 是 ， 真 实 世 界 的 光源 很 少 是 点 光源 一 一 它们 管 
常 是 区 域 光 源 。 另 一 个 原因 是 材料 和 表面 的 缺陷 积累 ， 以 及 物体 本 喘 通 
过 其 自身 的 反射 特性 产生 环境 光 的 作用 。 

图 8.16 展 示 了 物体 向 桌面 投射 柔 和 阴影 的 照片 示例 。 注 意 ， 这 不 是 
计算 机 泻 染 的 3D 场 景 ， 而 是 真实 的 照片 ， 是 本 书 作 者 之 一 在 家 中 拍摄 
的 。 








图 8.16 ”现实 世界 中 的 柔和 阴影 示例 


对 于 图 8.16 中 的 阴影 ， 有 两 点 需要 注意 。 





。 离 物 体 越 远 的 阴影 越 “ 邓 和 ”， 离 物体 越 近 的 阴影 越 “ 硬 ”"。 在 对 比 物 
PASH BAIL EY H Aa EBERT o 
。 距离 物体 越 近 的 阴影 显得 越 瞳 。 


光源 本 身 的 维度 会 导致 柔和 阴影 。 如 图 8.17 所 示 ， 光 源 上 各 处 会 投 
财 出 略微 不 同 的 阴影 。 各 种 阴影 不 同 的 区 域 称 为 半 影 (penumbra) ， 包 
括 阴 影 边 缘 的 柔和 区 域 。 





图 8.17 柔和 阴影 的 半 影 效果 





8.7.2 ”生成 柔和 阴影 百分比 邻近 滤波 


(PCF) 


EBE Ax 


有 多 种 方法 可 以 用 来 模拟 半 影 效果 以 在 软件 中 生成 柔和 阴影 。 最 简 
单 也 最 常见 的 一 种 方法 叫 作 百分比 邻近 滤波 〈Percentage Closer 
Filtering, PCF) 。 在 PCF 中 ， 我 们 对 单个 点 周围 的 几 个 位 置 的 阴影 纹理 
进行 采样 ， 以 估计 附近 位 置 在 阴影 中 的 百分比 。 根 据 附近 位 置 在 阴影 
的 数量 ， 对 正在 泻 染 的 像素 的 光照 分 量 进行 修改 。 整 个 计算 可 以 在 片段 
着 色 器 中 完成 ， 所 以 我 们 只 需要 对 其 中 的 代码 进行 修改 。PCF 还 可 用 于 
减少 锯齿 线 伪 影 。 





在 研究 实际 的 PCF 算 法 之 前 ， 我 们 先 看 一 个 类 似 的 简单 示例 来 展示 
PCEF 的 目标 。 考 虑 图 8.18 中 所 示 的 输出 片段 〈 像 素 ) 集 ， 其 颜色 由 片段 


着 色 器 计算 。 





图 8.18 TERRIS% 








假设 深 色 像素 处 于 阴影 中 ， 这 是 阴影 贴图 计算 的 结果 。 假 设 我 们 可 
以 访问 相 邻 的 像素 信息 ， 而 不 是 简单 地 如 图 所 示 泻 染 像素 〈 即 包括 或 不 
包括 漫 反 射 和 镜面 反射 分 量 ) ， 这 样 我 们 就 可 以 看 到 有 多 少 相 邻 像素 处 
于 阴影 中 。 例 如 ， 考 虑 图 8.19《〈 见 彩 插 ) 中 以 黄色 突出 显示 的 特定 像 
素 ， 根 据 图 8.18， 该 像素 不 在 阴影 中 。 











图 8.19 ” 单 像素 PCF 采 样 





在 高 亮 像素 的 9 个 像素 邻 域 中 ，3 个 像素 处 于 阴影 中 而 6 个 像素 处 于 
阴影 外 。 因 此 ， 泻 染 像素 的 颜色 可 以 被 计算 为 该 像素 处 的 环境 光 分 量 加 
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全 ) 变 亮 。 在 整个 网 格 中 重复 此 过 程 将 会 产生 图 8.20 所 示 的 像素 颜色 。 
注意 ， 对 于 那些 邻 域 完全 位 于 阴影 中 《或 阴影 外 ) 的 像素 ， 生 成 的 颜色 
与 标准 阴影 贴图 相同 。 








图 8.20 ZARA YE 








与 上 例 不 同 的 是 ， 在 PCF 的 实现 中 ， 不 是 对 演 染 像素 临近 区 域内 的 
每 个 像素 进行 采样 。 这 有 两 个 原因 : a) 我 们 想 在 片段 着 色 器 中 执行 
此 计算 ,但 片段 着 色 器 无 法 访问 其 他 像素 ; ，(b) 获 得 足够 宽 的 半 影 多 
FR CPO, 10~ 201K As Hi) 将 需要 为 每 个 被 泻 染 的 像 系 采样 数 百 个 附近 
的 像素 。 











PCF 解 决 了 以 下 两 个 问题 。 首 先 ， 我 们 不 试图 访问 附近 的 像素 ， 而 
是 在 阴影 贴图 中 对 附近 的 纹 素 进行 采样 。 片 段 着 色 器 可 以 执行 此 操作 ， 
因为 虽然 它 无 法 访问 附近 像素 的 值 ， 但 它 可 以 访问 整个 阴影 贴图 。 其 
次 ， 为 了 获得 足够 宽 的 半 影 效果 ， 需 要 对 附近 一 定数 量 的 阴影 贴图 纹 素 
进行 采样 ， 每 个 采样 的 纹 素 都 距离 所 泻 染 像素 的 纹 素 一 定 距离 。 




















半 影 的 宽度 和 采样 点 数 可 以 根据 场景 和 性 能 要 求 调 整 。 例 如 ， 图 
8.21 所 示 PCE 生 成 的 图 像 是 ， 每 个 像素 的 亮度 是 通过 对 64 个 不 同 的 纹 素 
进行 采样 确定 的 ， 它 们 与 像素 的 纹 素 距离 各 不 相同 。 











柔和 阴影 的 准确 度 或 平滑 度 取决 于 所 采样 附近 纹 素 的 数量 。 因 此 ， 
在 性 能 和 质量 之 间 需 要 权衡 一 一 采样 点 越 多 ， 效 果 越 好 ， 但 计算 开销 也 
越 多 。 场 景 的 复杂 性 和 给 定 应 用 所 需 的 帧 率 对 于 阴影 可 实现 的 质量 有 者 
相应 的 限制 。 每 像 系 及 样 64 个 点 《如 图 8.21 所 示 〉 通 常 是 不 切实 际 的 。 


"n u 

















图 8.21 柔和 阴影 泻 染 每 像素 64 次 采样 








一 种 用 于 实现 PCF 的 常见 算法 是 对 每 个 像素 附近 的 4 个 纹 素 进行 采 
样 ， 其 中 样本 通过 指定 从 像素 对 应 纹 素 的 偏 移 量 选择 。 对 于 每 个 像素 ， 
我 们 都 需要 改变 偏 移 量 ， 并 用 新 的 偏 移 量 确 定 采 样 的 4 个 纹 素 。 用 交错 
方式 改变 偶 移 量 的 方法 被 称 为 抖动 ， 它 旨 在 使 得 柔和 阴影 边界 不 会 由 于 
采样 点 不 足 看 起 来 “ 结 块 ”。 




















一 种 常见 的 方法 是 假设 有 4 种 不 同 偏 移 模 式 ， 每 次 取 其 中 一 种 一 一 
我 们 可 以 通过 计算 像素 的 glFragCoord mod 2 来 选择 当前 像素 的 偏 移 模 
式 。 之 前 有 提 到 ，glFragCoord 是 vec2 类 型 ， 包 含 像素 位 置 的 x、y 坐 标 。 





因此 ，mod 计 算 的 结果 有 4 种 可 能 的 值 : (0,0). (0,1). (1,0)2K(1,1). RAI 
使 用 glFragCoord mod 2 的 结果 来 从 纹 素 空 间 〈 即 阴影 贴图 ) 4 种 不 同 偏 
移 模 式 中 选择 一 种 。 





偏 移 模式 通常 在 x 和 y 方 同上 指定 ， 具 有 -1.5，-0.5，+0.5 和 +1.5 的 不 
同 组 合 〈 也 可 以 根据 需要 进行 缩放 ) 。 更 具体 来 说 ， 由 glFragCoord mod 
2 计算 得 到 的 每 种 情况 的 4 种 常用 偏 移 模 式 是 : 











thi £2 #1 (0, 0) MELO, 1) 俩 移 模 式 (10) i AS BSNL.) 
采样 点 : 采样 点 : 采样 点 : 采样 点 : 
(s, -1.5, s, +1.5) (s, -1.5, s, +0.5) (s, - 0.5, s, +1.5) (s, —0.5, s, +0.5) 
(s, -1.5, 8, 一 0.5) (s, -1.5, s, 一 1.5) (s, —0.5, s, —0.5) (s, —0.5, s, 一 1.5) 
(s, +0.5, s, +1.5) (s, +0.5, s, +0.5) (s, +1.5, s, +1.5) (s, +1.5, 5, +0.5) 
(405,505) (s, +0.5, s, —1.5) (s, +1.5, s, — 0.5) (1.51S) 


S$, 和 S, 指 的 是 与 正在 泻 染 的 像素 相对 应 的 阴影 贴图 中 的 位 置 
(Se Sp) ， 在 本 章 的 代码 示例 中 标识 为 shadow_coord。 这 4 种 偏 移 模式 
如 图 8.22 所 示 《 见 彩 插 ) ， 每 种 情况 都 以 不 同 的 颜色 显示 。 在 每 种 情况 
下 ， 对 应 于 正 被 泻 染 的 像素 的 纹 妹 位 于 该 情况 的 图 的 原点 。 请 注意 ， 当 
在 图 8.23〈 见 彩 插 ) 中 一 起 显示 时 ， 偶 移 的 交错 /抖动 很 明显 。 











case: case 


a case: 
偏 移 模式 2 = (0,0) 偏 移 模 式 2 = (0,1) 偏 移 模式 2= (1,0) 


case 


IRERE = (1,1) 


图 8.22 ”抖动 的 4 像素 PCF 采 样 示例 


让 我 们 来 针对 特定 像素 看 看 整个 计算 过 程 。 假 设 正 在 泻 染 的 像素 位 
于 glFragCoord = (48,13) 。 首 先 我 们 确定 像素 在 阴影 贴图 的 4 个 采样 
点 。 为 此 ， 我 们 将 计算 vec2(48,13) mod 2， 等 于 (0,1) 。 因 此 我 们 选择 
(0,1) 所 对 应 的 偏 移 ， 在 图 8.22 中 以 绿色 显示 ， 并 且 在 阴影 贴图 对 相应 
的 点 进行 采样 (假设 没有 指定 偏 移 的 缩放 量 ) ， 得 到 : 





e (shadow_coord.x—1.5, shadow_coord.y+0.5) 
e (shadow_coord.x—1.5, shadow_coord.y—1.5) 
e (shadow_coord.x+0.5, shadow_coord.y+0.5) 
e (shadow_coord.x+0.5, shadow_coord.y—1.5) 


(回想 一 下 ，shadow_coord 是 阴影 贴图 中 与 正在 泻 染 的 像素 相对 应 
的 纹 素 的 位 置 一 ”在 图 8.22 和 图 8.23 中 显示 为 白色 圆圈 ) 。 





图 8.23 ”抖动 的 4 像素 PCF 采 样 〈4 种 偏 移 模式 ) 


接 下 来 ， 对 我 们 选取 的 这 4 个 点 分 别 调用 textureProjO， 在 每 种 情况 
下 都 返回 0.0 或 1.0， 具 体 取决 于 该 采样 点 是 否 在 阴影 中 。 将 4 个 结果 相 加 
并 除 以 4.0， 束 可 以 确定 阴影 中 采样 点 的 百分比 。 然 后 将 此 百分比 用 作 
乘 数 ， 确 定 泻 染 当前 像 系 时 要 应 用 的 漫 有 反射 和 镜面 反射 分 量 。 











尽管 采样 尺寸 很 小 一 一 每 个 像素 只 有 4 个 样本 一 一 这 种 拌 动 方法 通 
常 可 以 产生 好 得 惊人 的 柔和 阴影 。 图 8.24 是 使 用 4 像素 拌 动 PCF 生 成 的 。 
虽然 它 不 如 之 前 图 8.21 所 示 的 64 点 采样 版 本 好 ， 但 泻 染 速度 要 快 得 多 。 


ae 

















图 8.24 ”柔和 阴影 洽 染 一 一 每 像素 4 次 采样 ， 使 用 抖动 





在 下 一 节 中 ， 我 们 对 GLSL 乒 段 着 色 器 进行 编码 ， 实 现 4 采样 拌 动 的 
PCF 季 和 阴影 以 及 之 前 展示 的 64 采 样 PCF 季 和 阴影 。 


8.7.3 和 柔和 阴影 /PCE 程 序 


如 前 所 述 ， 柔 和 阴影 计算 可 以 完全 在 片段 着 色 器 中 完成 。 程 序 8.2 
展示 了 片段 着 色 器 代码 ， 取 代 图 8.7 中 的 片段 着 色 器 。 添 加 的 PCF 相 关 代 
码 己 突 出 显示 。 


程序 8.2 ”百分比 邻近 滤波 (PCF) 








片段 着 色 器 





#version 430 


// 所 有 变量 定义 未 改动 


// 从 shadow_coord 返 回 距 离 (x，y) 处 的 纹 素 的 阴影 深度 值 
// shadow_coord 是 阴影 贴图 中 与 正在 泻 染 的 当前 像素 相对 应 的 位 置 

















float lookup(float ox, float oy) 
{ float t = textureProj(shadowTex, 
shadow_coord + vec4(ox * 0.001 * shadow_coord.w, oy * 0.001 * shadow_c 
oord.w, 
-0.01, 0.0)); // 第 三 个 参数 (-0.01) BATRA RAE ie E 
return t; 


} 


山 | 





void main(void) 

{ float shadowFactor = 9.0; 
vec3 L = normalize(vLightDir) ; 
vec3 N = normalize(vNormal) ; 
vec3 V = normalize(-vVertPos); 
vec3 H = normalize(vHalfVec) ; 


// ----- 此 部 分 生成 一 个 4 采样 拌 动 的 柔和 阴影 
float swidth = 2.5; // 可 调整 的 阴影 扩散 量 
// 根据 glFragCoord mod 2 生成 4 采样 模式 中 的 一 个 

vec2 offset = mod(floor(gl_FragCoord.xy), 2.0) * swidth; 

shadowFactor += lookup(-1.5*swidth + offset.x, 1.5*swidth - offset.y); 
shadowFactor += lookup(-1.5*swidth + offset.x, -@.5*swidth - offset.y) 




















shadowFactor += lookup( @.5*swidth + offset.x, 1.5*swidth - offset.y); 
shadowFactor += lookup( @.5*swidth + offset.x, -@.5*swidth - offset.y) 


shadowFactor = shadowFactor / 4.0; // shadowFactor 是 4 个 采样 点 的 平均 值 








jf ees 取消 本 节 注 释 以 生成 64 采 样 的 高 分 辩 率 柔和 阴影 
// float swidth = 2.5; // 可 调整 的 阴影 扩散 量 
// float endp = swidth*3.@ +swidth/2.0; 

// for (float m=-endp ; m<=endp ; m=m+swidth) 
// { for (float n=-endp ; n<=endp ; n=n+swidth) 
// { shadowFactor += Lookup(m,n); 


//} } 
// shadowFactor = shadowFactor / 64.0; 




















vec4 shadowColor = globalAmbient * material.ambient + light.ambient * 
material.ambient; 
vec4 lightedColor = light.diffuse * material.diffuse * max(dot(L,N),@. 
ð) 
+ light.specular * material.specular 
* pow(max(dot(H,N),@.0),material.shininess*3.@) ; 


fragColor = vec4((shadowColor.xyz + shadowFactor*(lightedColor.xyz)),1 


.0) 





程序 8.2 中 展示 的 片段 着 色 器 包含 4 采样 和 64 采 样 的 PCF 柔 和 阴影 的 
代码 。 为 了 更 方便 进行 采样 ， 我 们 需要 定义 lookup0 函 数 。 在 lookupO) 函 
AA ii] FA GLSL ex MttextureProj(), Mit TE RAs Sc HEP DA Ta cE im 2 Bt (ox, 
oy EFT AE FK m HE i ZEAE LA / windowsize， 这 里 我 们 简单 地 假设 窗口 
大 小 为 1 000 像 素 x1 000 像 素 ， 将 乘 数 硬 编码 为 0.001。D 





4 样本 持 动 的 计算 代码 在 main0 函 数 中 高 亮 亚 示 ， 其 实现 遵循 上 一 节 
中 插 述 的 算法 。 同 时 添加 了 一 个 比例 因子 swidth， 用 于 调整 阴影 边缘 
的 “柔和 ”区 域 的 大 小 。 


64 采 样 代码 以 注释 形式 出 现在 后 面 。 可 以 通过 取消 64 采 样 代码 注释 
并 注释 4 采样 代码 以 使 用 64 采 样 。 在 64 采 样 代 码 中 ，swidth 比 例 因子 用 作 
伦 套 循环 中 的 步 长 ， 其 采样 距离 正 被 泻 染 的 像素 的 不 同 距离 处 的 点 。 例 
如 ， 当 使 用 代码 中 的 swidth 值 (2.5) 时 ， 程 序 将 沿 着 每 个 轴 在 两 个 方向 上 
以 1.25、3.75、6.25 和 8.25 的 距离 选择 采样 点 一 一 然后 根据 窗口 大 小 进行 
缩放 《如 前 所 述 ) 并 用 作 纹 理 坐 标 采 样 阴影 纹理 。 在 这 么 多 采样 的 情况 
下 ， 通 名 不 需要 使 用 抖动 来 获得 更 好 的 结 





图 8.25 展 示 了 我 们 运行 的 环 面 /金字 塔 阴影 贴图 示例 ， 它 将 PCF 柔 和 
阴影 与 程序 8.2 中 的 片段 着 色 圳 相 结合 ， 分 别 使 用 了 4 采样 和 64 采 样 的 方 
法 。swidth 的 选 值 取决 于 场景 ， 对 于 环 面 /金字 塔 示例 ， 它 的 值 为 2.5， 而 
对 于 之 前 的 图 8.21 中 显示 的 海豚 示例 ，swidth 的 值 为 8.0。 


























图 8.25 ” PCF 来 和 阴影 泻 染 一 一 每 像素 4 次 采样 ， 拌 动 〈 左 ) ; 每 像素 64 次 采样 ， 不 抖动 〈 右 ) 








补充 说 明 


在 本 章 中 ， 我 们 仅 给 出 了 3D 图 形 中 阴影 世界 的 最 基本 介绍 。 在 更 
复杂 的 场景 中 ， 即 便 使 用 本 章 提 供 的 基础 阴影 贴图 方法 ， 也 可 能 需要 进 
行进 一 步 的 研究 。 





例如 ， 当 场景 中 的 菜 些 对 象 拥 有 纹理 的 情况 下 ， 添 加 阴影 时 必须 确 
保 卢 段 痢 色 吉 正确 区 分 阴影 纹理 和 其 他 纹理 。 一 种 简单 的 方法 是 将 它们 
绑 定 到 不 同 的 纹理 单元 ， 例 如 : 





layout (binding = 6) uniform sampler2DShadow shTex; 





layout (binding = 1) uniform sampler2D otherTexture; 


然后 ，C++ /OpenGL 应 用 程序 可 以 通过 它们 的 绑 定 值 来 引用 两 个 采 
FEA o 


当场 景 使 用 多 个 灯光 时 ， 则 需要 多 个 阴影 纹理 一 每 个 光源 需要 一 
个 阴影 纹理 。 此 外 ， 每 个 光源 都 需要 单独 执行 第 1 轮 泻 染 ， 并 在 第 2 轮 演 











尽管 我 们 在 阴影 贴图 的 每 个 阶段 都 使 用 了 透视 投影 ， 但 值得 注意 的 
是 ， 当 光源 是 远 距 离 光 源 和 定 癌 光源 而 非 我 们 使 用 的 位 置 光 时 ， 正 射 投 
BOIL FS A He A Io 





生成 真实 的 阴影 在 计算 机 图 形 学 中 仍然 是 一 个 活跃 而 义 复 杂 的 领 
域 ， 其 中 提出 的 许多 技术 超出 了 本 书 的 范畴 。 我 们 屁 励 对 更 多 细 市 感 兴 
趣 的 读者 研究 更 专业 的 资源 ， 如 E5124 [GP19J 和 [M6]。 





8.7.3 小 节 包 含 一 个 GLSL 函 数 的 例子 (| 除了 “main”) 。 与 在 C 语 言 中 
一 样 ， 必 须 在 调用 它们 之 前 (或 “上 方 *”) 定义 函数 ， 否 则 必须 提供 前 向 
声明 。 在 该 示例 中 则 不 需要 前 向 声明 ， 因 为 函数 定义 在 调用 代码 上 方 。 





习题 





8.1 在 程序 8.1 中 ， 演 试 在 不 同 设置 下 使 用 glPolygonOffset()， 并 观 
察 对 像 的 伪 影 效果 ， 如 Peter Panning. 

8.2 (UIA) 修改 程序 8.1， 以 便 通 过 移动 鼠标 移动 灯光 ， 类 似 于 
练习 7.1。 你 可 能 会 注意 到 某 些 照明 位 置 会 出 现 阴影 伪 影 ， 而 其 他 位 置 
则 没有 。 





8.3 CA) 给 程序 8.1 添 加 动画 ， 使 得 对 象 或 光源 (或 两 者 一 
E) 自行 移动 一 一 例如 一 个 绕 男 一 个 旋转 。 如 果 问 场景 添加 地 平面 ， 阴 
影 效果 将 更 加 明显 ， 如 图 8.14 所 示 。 





8.4 (CUA) 修改 程序 8.2， 将 lookup0 函 数 中 的 硬 编码 值 0.001 蔡 换 
为 更 准确 的 1.0 / shadowbufferwidth 和 1.0 / shadowbufferheight。 观 察 在 窗 
口 大 小 变化 的 情况 下 ， 这 种 变化 产生 了 何 种 程度 的 影响 (或 没有 影 
啊 ) 。 


85 CWA) 更 复杂 的 百分比 邻近 滤波 (PCF) 的 实现 会 加 入 光 和 
阴影 与 光 和 遮挡 物 之 间 的 相对 距离 。 通 过 光线 靠近 或 远离 遮挡 物 时 《或 
当 遮 挡 物 靠近 或 远离 阴影 时 ) ， 调 整 半 影 的 大 小 ， 可 以 使 骤 和 阴影 更 盟 
真 。 研 究 此 功能 现 有 的 实现 方法 ， 并 将 其 添加 到 程序 8.2 中 。 
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[1] 模板 缓冲 区 是 通过 OpenGL 访 问 的 第 三 个 缓冲 区 一 一 在 颜色 绥 冲 区 
和 Z 缓 冲 区 之 后 。 本 书 中 不 对 模板 缓冲 区 进行 讲解 。 一 一 译 者 注 





[2] 我 们 还 a 因为 OpenGL 在 纹理 查 
找 期 间 会 ene ce 以 w。 迄 今 为 止 我 们 一 直 忽略 了 这 种 称 为 透 

分 割 的 操作 ， 因 此 必须 在 这 里 说 明 。 有 关 透 视 分 割 的 更 多 信息 ， 请 参 
a, 


PIE KREMER 


对 于 室外 3D 场 景 ， 通 音 可 以 通过 在 地 乎 线 上 创造 一 些 逼 中 的 效 
Fe, RSE GELS. SAT A, AGA BY EL ESA ARK 
我 们 习惯 于 看 到 远 处 的 大 型 物体 ， 例 如 : 云 、 群 山 或 太阳 (或 夜空 中 的 
EBM ASE) 。 但 是 ， 将 这 些 对 象 作为 单个 模型 添加 到 场景 中 可 能 会 产 
生 高 到 无 法 承受 的 性 能 成 本 。 天 空 盒 或 天 空 窟 项 提供 了 有 效 且 相对 简单 
的 方法 ， 用 来 生成 令 人 信服 的 地 平 线 景观 。 











天 空 盒 的 概念 非常 巧妙 而 又 简 单 : 

D 实例 化 一 个 立方 体 对 象 ; 

(2) 将 立方 体 的 纹理 设置 为 所 需 的 环境 ; 
(3) 将 立方 体 围 经 相机 放置 。 


我 们 已 经 知道 如 何 完 成 以 上 这 些 步 又 。 但 还 有 少量 其 他 细节 需要 注 


意 。 
。 如 何 为 地 平 线 制作 纹理 ? 


立方 体 有 6 个 面 ， 我 们 需要 为 这 些 面 都 谎 加 纹理 。 一 种 方法 是 使 用 6 


另 一 种 常见 〈 且 高 效 ) 的 方式 则 是 使 用 一 


个 图 像 文 件 和 6 个 纹理 单元 
个 包含 6 个 面 的 纹理 的 图 像 ， 如 图 9.1 所 示 。 














图 9.1 6 面 天 空 盒 纹理 立方 体贴 图 


上 例 中 的 纹理 立方 体贴 图 ， 仪 用 一 个 纹理 单元 ， 束 可 以 为 6 个 面 添 
分 对 应 于 立方 体 的 顶部 、 底 部 、 正 


加 纹理 的 图 像 。 立 方 体贴 图 的 6 
当 贴 图 “ 包 衷 ”在 立方 体 周 围 时 ， 对 于 立方 体内 的 相机 


背面 和 两 侧 。 
它 扮 演 了 地 平 线 的 角色 ， 如 图 9.2 所 示 。 
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而 言 ， 













使 用 纹理 立方 体贴 图 为 立方 体 添 加 纹理 需要 指定 适当 的 纹理 坐标 。 
图 9.3 展 示 了 纹理 坐标 的 分 布 ， 这 些 坐 标 接 着 会 分 配给 立方 体 的 每 个 顶 
Frio 
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图 9.3 ”立方 体贴 图 纹理 坐标 








。 如 何 让 天 空 盒 看 起 来 “距离 很 远 ”? 


构建 天 空 合 的 男 一 个 重要 因素 是 确保 纹理 的 表现 看 起 来 像 是 远 处 的 
地 平 线 。 首 先 ， 人 们 可 能 会 认为 这 需要 构建 巨大 的 天 空 盒 。 然 而 ， 
证 明 这 并 不 可 取 ， 因 为 巨大 的 天 空 盒 会 拉 伸 和 扭曲 纹理 。 相 反 ， 通 过 使 
用 以 下 两 个 技巧 ， 可 以 使 天 空 例 显得 巨大 (从 而 感觉 距离 很 远 ): 











Ca) 禁用 深 友 测试 并 先 泻 染 天 空 傅 〈( 在 泻 染 场景 中 的 其 他 对 象 时 
重新 启用 深度 测试 ) ; 


(b) 天 空 盒 随 相机 移动 《如 果 相 机 需要 移动 ) 。 


过 在 茶 用 深度 测试 的 情况 下 先 绘制 天 空 盒 ， 深 度 缓 冲 圳 的 值 仍 将 
全 设 为 1.0〈 即 最 远 距离 ) 。 因 此 ， 场 景 中 的 所 有 其 他 对 象 将 被 完全 泻 


染 ， 即 天 罕 盒 不 会 阻挡 任何 其 他 对 象 。 这 样 ， 无 论 天 空 盒 的 实际 大 小 如 
何 ， 会 使 天 空 合 的 各 面 的 位 置 看 起 来 比 其 他 物体 都 更 远 。 而 实际 的 天 空 

盒 立方 体 本 身 可 以 非常 小 ， 只 要 它 在 相机 移动 时 随 相 机 一 起 移动 即 可 。 
图 9.4 展 示 了 从 天 空 盒 内 部 查看 简单 的 场景 《实际 上 只 有 一 个 砖 纹理 环 


面 ) 。 
<3 














a 
tl 


图 9.4 ”从 天 空 盒 内 部 查看 场景 


这 里 我 们 得 益 于 对 图 9.4 与 之 前 图 9.2 和 图 9.3 的 关系 的 仔细 研究 。 注 
意 ， 场 景 中 可 见 的 天 空 盒 部 分 是 立方 体贴 图 的 最 右 侧 部 分 。 这 是 因为 援 
像 机 处 于 默认 方向 ， 面 向 -Z 方 向 ， 因 此 正在 观察 天 空 盒 立 方 体 的 背面 
《如 图 9.3 所 示 ) 。 另 请 注意 ， 立 方 体 贴图 的 背面 在 场景 中 演 染 时 会 呈 
水 平反 转 状 态 ; 这 是 因为 立方 体贴 图 的 “背面 ”部 分 已 经 折 鱼 在 相机 周 
围 ， 因 此 看 起 来 是 经 过 侧 向 翻转 的 ， 如 图 9.2 所 示 。 
































。 如 何 构建 纹理 立方 体贴 图 ? 





从 图 稿 或 照片 构建 纹理 立方 体贴 图 图 像 时 ， 需 要 注意 避免 在 立方 体 
面 交 汇 点 处 的 “ 接 颖 ”"， 并 创建 正确 的 透视 图 ， 才 能 让 天 空 例 看 起 来 允 真 
且 无 畸变 。 有 许多 工具 可 以 辅助 达成 这 一 目标 : Terragen, Autodesk 








3Ds Max. Blenderji Adobe Photoshop 都 有 用 于 构建 或 处 理 立 方 体贴 图 的 
工具 。 同 时 ， 还 有 许多 网 站 提供 各 种 现成 的 立方 体 地 图 ， 既 有 付费 的 ， 
也 有 免费 的 。 


9.2 KTA 


建立 地 平 线 效 果 的 另 一 种 方法 是 使 用 天 空 写 项 。 除 了 使 用 带 纹 理 的 
球体 (或 半球 体 ) (UE SCHEIN IL A, FEARS A EAI. 
RAGA, BATA IRA ST GRAB» JPR BAL 
AERA SIN Pie CASS FAK 28 Ss MAME Terragen 
[TETEHI « 








图 9.5 “天空 穹顶 与 其 中 的 相机 





AE SWAB AA CHICA. BM, “AIA Be Bl hye Be 
SEIA OSEERE AR A UMA ERRARE TARAS 
THUR SZ WU FE BR A BS TR AY ET ASR, KESMA E 
多 的 项 点， 其 数量 取 诀 于 期 望 的 精度 。 


当 使 用 天 空 写 顶 呈现 室外 场景 时 ， 通 常 与 地 平面 或 菜 种 地 形 相 结 
合 。 当 使 用 天 空 窟 顶 旦 现 宇宙 中 的 场景 (例如 星空 ) 时， 使 用 图 9.6 所 


示 的 球体 通常 更 为 实际 〈 为 了 清晰 地 使 球体 可 视 化 ， 球 体 表面 添加 了 一 
道 虚线 ) 。 





t 























图 9.6 fe HBR AIA RE ST ( 星 图 来 自 B001]) 











93 ”实现 天 空 盒 











尽管 天 空 写 项 有 许多 优点 ， 天 空 盒 仍然 更 为 常见 。OpenGL 对 天 空 
盒 的 支持 也 更 好 ， 在 进行 环境 贴图 时 更 方便 (本 章 后 面 会 介绍 ) 。 出 于 
这 些 原因 ， 我 们 将 专注 于 天 空 使 的 实现 。 








空 使 有 两 种 实现 方法 ， 从 头 开始 构建 一 个 简单 的 天 空 盒 ， 或 使 用 
OpenGL 中 的 立方 体贴 图 工具 。 它 们 有 各 自 的 优点 ， 因 此 我 们 下 面 都 会 
进行 介绍 





9.3.1 WIMMER 


我 们 已 经 涵盖 了 构建 简单 天 空 盒 所 需 的 几乎 所 有 内 容 。 第 4 章 介绍 





了 立方 体 模型 ， 分 配 纹理 坐标 已 经 在 本 章 前 面 图 9.3 中 进行 了 展示 ; 使 
用 SOIL2 库 读 取 纹 理 以 及 在 3D 空 间 中 放置 对 象 也 都 已 经 在 之 前 的 章节 进 
行 过 讲解 。 这 里 ， 我 们 将 看 到 如 何 简 单 地 启用 和 禁用 深度 测试 (只 需要 
一 行 代码 〉。 


程序 9.1 展 示 了 简单 天 空 盒 的 代码 结构 ， 场 景 中 仅 包含 一 个 带 纹理 
的 环 面 。 纹 理 坐 标 分 配 和 局 用 /共用 深度 测试 的 调用 已 突出 显示 。 





程序 9.1 简单 的 天 空 盒 








C++/OpenGL 应 用 程序 


// 所 有 变量 声明 ， 构 造 函 数 和 init() 与 之 前 相同 








ven ‘REA GLFWwindow* window, double currentTime) { 


// YRBRERE BOP DK AR EBT, FRR PB BE A EIE RE 























glUseProgram(renderingProgram) ; 





// WER TCL RAE ho MERR T BUS TERA E 
mMat = glm::translate(glm::mat4(1.0f), glm::vec3(cameraX, cameraY, came 
raZ)); 











// 构建 MODEL-VIEW 和 矩阵 
mvMat = VMat * mMat; 

















4 





// wat, KEMVAIPROIFE REIL A RAE 

















// 设置 包含 顶点 的 缓冲 区 

glBindBuffer(GL ARRAY BUFFER, vbo[@]); 
glVertexAttribPointer(@,3, GL_FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray(@) ; 

















// 设置 包含 纹理 坐标 的 缓冲 区 
glBindBuffer(GL ARRAY_ BUFFER, vbo[1]); 
glVertexAttribPointer(1,2, GL_FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray(1) ; 





























// 激 活 天 空 盒 纹理 








glActiveTexture(GL_TEXTURE®@) ; 
glBindTexture(GL_TEXTURE_2D, skyboxTexture) ; 


glEnable(GL_CULL_FACE); 
glFrontFace(GL_CCW); // 立方 体 缠绕 顺序 是 顺 时 针 的 ， 但 我 们 从 内 部 查看 ， 因 此 
使 用 逆 时 针 缠 绕 顺 序 GL_CCW 












































glDisable(GL_DEPTH_TEST); 

















p glDrawArrays(GL_TRIANGLES, @, 36); // 在 没有 深度 测试 的 情况 下 绘制 天 空 
k glEnable(GL_DEPTH_TEST); 

// 现 在 像 之 前 一 样 绘制 场景 中 的 对 象 

g1DrawElements( on // 和 之 前 的 场景 中 的 对 象 一 样 
} 


void setupVertices(void) { 
// cube_vertices 定 义 与 之 前 相同 
// 天 空 盒 的 立方 体 纹理 坐标 ， 如 图 9.3 所 示 
float cubeTextureCoord[72] = { 


















































1.00f, @.66f, 1.00f, 0.33f, O.75f, 0.33f, // BHAA 
0.75f, 0.33f, 0.75f, 0.66f, 1.00f, 0.66f, // 背面 左上 角 
0.75f, 0.33f, 0.50f, 0.33f, 0.75f, 0.66f, // 右面 右 下 角 
0.50f, 0.33f, 0.50f, 0.66f, 0.75f, 0.66f, // 右面 左上 角 
6.56f，6.33f，6.25f，6.33f，6.56f，6.66f， // 正面 右 下 角 
0.25f, 0.33f, @.25f, 0.66f, 0.50f, 0.66f, // 正面 左上 角 
0.25f, 0.33f, 0.00f, 0.33f, @.25f, 68.66f, // 左面 右 下 角 
0.00f, 0.33f, 0.00f, 0.66f, 0.25f, 0.66f, // 左面 左上 角 
0.25f, 0.33f, 0.50f, 0.33f, 0.50f, 0.00f, // 下 面 右 下 角 
0.50f, 0.00f, 0.25f, 0.00f, 0.25f, 0.33f, // 下 面 左 上 和 角 
0.25f, 1.00f, @.50f, 1.00f, 60.506f, 8.66f, // 上 面 右 下 角 
0.50f, 0.66f, 0.25f, 0.66f, 0.25f, 1.00f // 上 面 左 上 和 角 


}; 
// 像 往常 一 样 为 立方 体 和 场景 对 象 设 置 缓冲 区 


























} 
// 用 于 加 载 着 色 器 、 纹 理 、main() 等 的 模块 ， 如 前 





标准 纹理 着 色 器 现在 用 于 场景 中 的 所 有 对 象 ， 包 括 立 方 体贴 图 : 





顶点 着 色 器 

#version 430 

layout (location = 6) in vec3 position; 
layout (location = 1) in vec2 tex_coord; 
out vec2 tc; 





uniform mat4 mv_matrix; 
uniform mat4 proj_matrix; 
layout (binding = 6) uniform sampler2D s; 


void main(void) 
{ tc = tex_coord; 
gl Position = proj matrix * mv_matrix * vec4(position,1.9@); 


} 
片段 着 色 器 


#version 430 

in vec2 tc; 

out vec4 fragColor; 

uniform mat4 mv_matrix; 

uniform mat4 proj_matrix; 

layout (binding = 6) uniform sampler2D s; 





void main(void) 
{ fragColor = texture(s,tc); 








纹理 立方 体贴 图 (1) KERT AF ANERE R 


纹理 立方 体贴 图 (2) 纹理 天 空 盒 中 所 兆 染 的 场景 





图 9.7 ”简单 天 空 盒 泻 染 结果 








如 前 所 述 ， 天 空 盒 容 易 受 到 图 像 畸变 和 接 颖 的 影响 。 接 颖 指 两 个 纹 
理 图 像 接触 的 地 方 ( 比 如 沿 着 立方 体 的 边缘 ) 有 时 出 现 的 可 见 线条 。 图 
9.8 展 示 了 一 个 图 像 上 半 部 分 出 现 接 颖 的 示例 ， 它 是 运行 程序 9.1 时 出 现 
的 伪 影 。 为 了 避免 接 颖 ， 需 要 仔细 构建 立方 体贴 图 图 像 ， 并 分 配 精确 的 
纹理 坐标 。 有 一 些 工具 可 以 用 来 沿 图 像 边缘 减少 接 颖 (例如 IS161]) ， 不 
过 这 个 主题 超出 了 本 书 的 范围 。 














图 9.8 ”天 空 盒 “ 接 缝 ” 伪 影 





9.3.2 ”使 用 OpenGEL 立 方 体贴 图 


构建 天 空 盒 的 另 一 种 方法 是 使 用 OpenGL 纹 理 立 方 体 贴图 。OpenGL 
立方 体贴 图 比 我 们 在 上 一 节 中 看 到 的 简单 方法 稍微 复杂 一 点 。 但 是 ， 使 
用 OpenGL 立 方 体 贴图 有 目 己 的 优点 ， 例 如 减少 接 缝 以 及 文 持 环境 贴 
图 。 


OpenGL 纹 理 立 方 体贴 图 类 似 于 稍 后 将 要 研究 的 3D 纹 理 ， 它 们 都 使 
用 3 个 纹理 坐标 访问 一 一 通常 标记 为 (s, t, 7) 而 不 是 我 们 目前 为 止 
用 到 的 两 个 。OpenGL 纹 理 立 方 体贴 图 的 另 一 个 特性 是 ， 其 中 的 图 像 以 
纹理 图 像 的 左上 角 【 而 不 是 通常 的 左下 角 )〉 作为 纹理 坐标 〈0, 0,0) ， 
这 通常 是 混乱 产生 的 源头 。 








程序 9.1 中 展示 的 方法 通过 读 入 单个 图 像 来 为 立方 体贴 图 添加 弘 
理 ， 而 程序 9.2 中 展示 的 loadCubeMap0) 函 数 则 读 入 6 个 单独 的 立方 体面 图 





像 文 件 。 正 如 我 们 在 第 5 章 中 所 学 的 ， 有 许多 方法 可 以 读 取 纹理 图 像 ， 
我 们 选择 使 用 SOIL2 库 。 在 这 里 ，SOIL2 用 于 实例 化 和 加 载 OpenGL 立 方 
体贴 图 也 非常 方便 。 我 们 先 找到 需要 读 入 的 文件 ， 然 后 调用 
SOIL_load_OGL_cubemap()， 其 参数 包括 6 个 图 像 文 件 和 一 些 其 他 参 
数 ， 类 似 于 我 们 在 第 5 间 中 看 到 的 SOIL_load_OGL _texture()。 在 使 用 
OpenGL 立 方 体贴 图 时 ， 无 须 垂 直 翻 转 纹 理 ，OpenGL 会 自动 进行 处 理 ， 
注意 ，loadCubeMap() 函 数 放 在 “Utils.cpp” 文 件 中 。 


initO 函 数 现在 包含 一 个 函数 调用 以 启用 
GL_TEXTURE_CUBE_MAP_SEAMLESS， 它 告诉 OpenGL 党 试 混合 立 
方 体 相 邻 的 边 以 减少 或 消除 接 缝 。 在 display0 中 ， 立 方 体 的 顶点 像 以 前 
一 样 沿 管线 癌 下 发 送 ， 但 这 次 不 需要 发 送 立 方 体 的 纹理 坐标 。 我 们 将 会 
看 到 ，OpenGL 纹 理 立 方 体贴 图 通常 使 用 立方 体 的 顶点 位 置 作为 其 纹理 
坐标 。 之 后 禁用 深度 测试 并 绘制 立方 体 。 然 后 为 场景 的 其 余部 分 重新 局 
用 深度 测试 。 


完成 后 的 ee ne 图 使 用 了 int 类 型 的 标识 符 进 行 引 
用 。 与 阴影 贴图 时 一 样 ， 通 过 将 纹理 包 衷 模式 设置 为 “ 夹 紧 到 边缘 ”， 可 
以 减少 沿边 框 的 伪 影 。 在 这 种 情况 下 ， 它 还 可 以 帮助 进一步 缩小 接 颖 。 
请 注意 ， 这 里 需要 为 3 个 纹理 坐标 s、t 和 ir 都 设置 纹理 包 吾 模式 。 





在 片段 着 色 器 中 使 用 名 为 samplerCube 的 特殊 类 型 的 采样 器 访问 纹 
理 。 在 纹理 立方 体贴 图 中 ， 从 采样 右 返 回 的 值 是 沿 着 方向 同 量 (sb 7) 从 
原点 “看 到 ”的 纹 素 。 因 此 ， 我 们 通 利 可 以 简单 地 使 用 传 入 的 插值 项 点 位 
置 作为 纹理 坐标 。 在 顶点 着 色 器 中 ， 我 们 将 立方 体 顶点 位 置 分 配 到 输出 








纹理 坐标 属性 中 ， 以 便 在 它们 到 达 片 段 着 色 器 时 进行 插值 。 另 外 需要 注 
ao EMRE EaP, RAEAN, JaA 
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下 ， 平 移 值 在 转换 矩阵 的 第 四 列 中 〉 。 这 样 ， 就 将 立方 体贴 图 固定 在 了 
摄像 机 位 置 ， 同 时 仍 允 许 合成 相机 “环顾 四 周 ”。 








程序 9.2” OpenGL 立方体 贴图 天 空 盒 





C++/OpenGL application 


int brickTexture, skyboxTexture; 
int renderingProgram, renderingProgramCubeMap ; 


void init(GLFWwindow* window) { 


renderingProgram = Utils: :createShaderProgram("vertShader.glsl", "frags 
hader.gls1"); 


renderingProgramCubeMap = Utils: :createShaderProgram("vertCShader.gls1" 
» "fragCShader.glsl"); 


setupVertices(); 















































brickTexture = Utils: :loadTexture("brick1. jpg"); // 场景 中 的 环 面 

skyboxTexture = Utils::loadCubeMap("cubeMap"); // 包含 天 空 盒 纹 理 
的 文件 夹 

glEnable(GL_TEXTURE_CUBE_MAP_SEAMLESS); 


} 


void display (GLFWwindow* window, double currentTime) { 


// 清除 颜色 绥 冲 区 和 深度 缓冲 区 ， 并 像 之 前 一 样 创建 投影 视图 矩阵 和 摄像 机 视图 矩阵 


















































// 准备 首先 绘制 天 空 盒 -注意 ， 现 在 它 的 演 染 程序 不 同 了 


glUseProgram(renderingProgramCubeMap) ; 


// FEP, VIER TE AAA DAS St Ae E 












































// 初始 化 立方 体 的 顶点 缓冲 区 《这 里 不 再 需要 纹理 坐标 缓冲 区 ) 
glBindBuffer(GL_ARRAY_BUFFER, vbo[ð]); 
glVertexAttribPointer(@, 3, GL_FLOAT, GL_FALSE, ©, @); 














glEnableVertexAttribArray(@) ; 














// 激活 立方 体贴 图 纹理 
glActiveTexture(GL_TEXTURE®@) ; 
glBindTexture(GL TEXTURE CUBE MAP, skyboxTexture) ; 











// 禁用 深度 测试 ， 之 后 绘制 立方 体贴 图 
glEnable(GL_CULL_FACE); 
glFrontFace(GL_CCw); 
glDisable(GL_DEPTH_TEST); 
glDrawArrays(GL_TRIANGLES, ©, 36); 
glEnable(GL_DEPTH_TEST); 

// 绘制 场景 其 余 内 容 

















} 


GLuint Utils::loadCubeMap(const char *mapDir) { 
GLuint textureRef; 





























// 假设 6 个 纹理 图 像 文件 xp、xn、yp、yn、zp、zn 都 是 JPG 格 式 图 像 





string xp = mapDir; xp = xp + "/xp.jpg"; 
string xn = mapDir; xn = xn + "/xn.jpg"; 
string yp = mapDir; yp = yp + "/yp.jpg"s 
string yn = mapDir; yn = yn + "/yn.jpg"; 
string zp = mapDir; zp = zp + "/zp.jpg"; 
string zn = mapDir; zn = zn + "/zn.jpg"; 


textureRef = SOIL_load_OGL_cubemap(xp.c_str(), xn.c_str(), yp.c_str(), 
yn.c_ str()， 
zp.c_str(), zn.c_str(), SOIL LOAD AUTO，SOIL_CREATE_NEN_ID，SOIL_FLA 
G_MIPMAPS) ; 


if (textureRef == @) cout << "didnt find cube map image file" << endl; 
glBindTexture(GL_TEXTURE_CUBE_MAP, textureRef) ; 


// 减少 接 颖 

glTexParameteri(GL_TEXTURE_CUBE_MAP, GL TEXTURE WRAP S, GL_CLAMP_TO_EDG 
E); 

glTexParameteri(GL_TEXTURE_CUBE_MAP, GL TEXTURE WRAP T, GL_CLAMP_TO_EDG 
E); 

glTexParameteri(GL TEXTURE CUBE MAP, GL TEXTURE WRAP R, GL_CLAMP_TO_EDG 


E); 





return textureRef; 


顶点 着 色 器 

#version 430 

layout (location = 6) in vec3 position; 
out vec3 tc; 





uniform mat4 v_matrix; 
uniform mat4 proj_matrix; 
layout (binding = 6) uniform samplerCube samp; 


void main(void) 

{ 
tc = position; // 纹理 坐标 就 是 顶点 坐标 
mat4 vrot_matrix = mat4(mat3(v_matrix)); // 从 视图 和 矩阵 中 删除 平移 
gl Position = proj_matrix * vrot_matrix * vec4(position, 1.0); 


} 
HRA dt 


#version 430 
in vec3 tc; 
out vec4 fragColor; 




















uniform mat4 v_matrix; 
uniform mat4 proj_matrix; 
layout (binding = 6) uniform samplerCube samp; 


void main(void) 
{ fragColor = texture(samp,tc); 
} 





9.4 环境 贴图 


在 照明 和 材质 章节 中 ， 我 们 考虑 了 物体 的 “光泽 ”。 然 而 ， 我 们 从 未 
对 非常 内 之 的 物体 进行 建 模 ， 例 如 镜子 或 铬 制品 。 这 些 物 体 在 有 小 范围 
镜面 局 光 的 同时 ， 还 能 够 反射 出 周围 物体 的 镜像 。 当 我 们 看 同 这 些 物 品 
时 ， 我 们 会 看 到 房间 里 的 其 他 东西 ， 有 时 甚至 会 看 到 我 们 自己 的 倒影 。 
ADS 照 明 模型 并 没有 提供 模拟 这 种 效果 的 方法 。 





不 过 ， 弘 理 立 方 体 贴图 提供 了 一 种 相对 简单 的 方法 来 模拟 (至 少 部 
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如 有 果 想 要 做 得 看 起 来 真实 ， 则 需要 找 我 们 从 物体 上 看 到 的 周围 环境 所 对 
应 的 纹理 坐标 。 





图 9.9 展 示 了 使 用 视图 癌 量 和 法 回 量 组 合计 算 反 射 癌 量 的 策略 ， 之 
后 ， 该 反射 问 量 会 用 来 从 立方 体贴 图 中 查找 纹 素 。 因 此 ， 反 射 癌 量 可 用 
来 直接 访问 纹理 立方 体贴 图 。 当 立方 体贴 图 用 于 上 述 功能 时 ， 称 其 为 环 
境 贴 图 。 


环境 贴图 





图 9.9 ”环境 贴图 总 览 


我 们 在 之 前 研究 Blinn-Phong 照 明 时 计算 过 反射 向 量 。 除 了 我 们 现在 
使 用 反射 癌 量 从 纹理 贴图 中 碍 找 值 ， 这 里 的 反射 向 量 概念 和 之 前 类 似 。 
这 种 技术 称 为 环境 贴图 或 反射 贴图 。 如 果 使 用 我 们 描述 的 第 二 种 方法 
(在 9.3.2 小 节 中 ， 使 用 OpenGL GL_TEXTURE_CUBE_MAP) 实现 立方 
体贴 图 ， 那 么 OpenGL 可 以 使 用 与 之 前 为 立方 体 添 加 纹理 相同 的 方法 来 
进行 环境 贴图 查找 。 我 们 使 用 视图 和 同 量 和 曲面 法 向 量 计算 视图 向 量 对 应 
的 离开 对 象 表面 的 反射 问 量 。 然 后 可 以 使 用 反射 癌 量 直接 对 纹理 立方 体 
贴图 图 像 进 行 采样 。 查 找 过 程 由 OpenGL samplerCube 辅 助 实现 ， 回 忆 上 











一 节 中 ，samplerCube 使 用 视图 方向 回 量 索引 。 因 此 ， 反 射 问 量 非常 适 
用 于 查找 所 需 的 纹 素 。 


实现 环境 贴图 需要 添加 相对 少量 的 代码 。 程 序 9.3 展 示 了 display0O 函 
数 和 initO 函 数 以 及 相关 着 色 器 中 的 更 改 ， 以 使 用 环境 贴图 泻 染 *“ 反 射 ? 环 
面 。 所 有 更 改 都 已 经 高 党 显示 。 值 得 注意 的 是 ， 如 果 使 用 了 Blinn-Phong 
照明 ， 那 么 很 多 需要 添加 的 代码 可 能 已 经 存在 了 。 真 正 新 的 代码 部 分 在 
片段 着 色 器 中 [在 main() 浮 数 中 ]。 

















乍 一 看 程序 9.3 中 突出 显示 的 代码 好 像 并 不 是 新 代码 。 实 际 上 ， 在 
我 们 研究 照明 的 时 候 ， 已 经 看 到 过 几乎 相同 的 代码 。 然 而 ， 在 当前 情况 
下 ， 法 辣 量 和 反 尉 向 量 用 于 完全 不 同 的 目的 。 在 之 前 的 代码 中 ， 它 们 用 
于 实现 ADS 照 明 模 型 。 而 在 这 里 ， 它 们 用 于 计算 环境 贴图 的 纹理 坐标 。 
因此 ， 我 们 将 部 分 代码 高 亮 ， 以 便 读 者 可 以 更 轻松 地 追踪 法 同 量 和 反射 
回 量 计算 的 使 用 ， 以 实现 这 一 新 目的 。 





泻 染 的 结果 会 显示 使 用 了 环境 贴图 的 “ 铬 制 * 环 面 ， 如 图 9.10 所 示 
〈 见 彩 插 ) 。 














图 9.10 ”用 于 创建 反射 环 面 的 环境 贴图 示例 








程序 9.3 ”环境 贴图 








void display(GLFWwindow* window, double currentTime) { 


// 用 来 绘制 立方 体贴 图 的 代码 未 改变 





vA 





// 所 有 修改 都 在 绘制 环 面 的 部 分 











glUseProgram(renderingProgram) ; 











// FERMPARR A St -REME PLT TA) Be ARR 

mvLloc = glGetUniformLocation(renderingProgram, "mv_matrix"); 
projLoc = glGetUniformLocation(renderingProgram, "“proj_matrix"); 
nLoc = glGetUniformLocation(renderingProgram, "norm matrix"); 











// AREMODELFESE, fn Gif 
mMat = glm::translate(glm::mat4(1.0f), glm::vec3(torLocX, torLocY, torL 
ocZ)); 





// ¥j32MODEL-VIEWSER:, wni 
mvMat = vMat * mMat; 
invTrMat = glm::transpose(glm::inverse(mvMat) ) ; 




















// 法 向 量变 换 现在 在 统一 变量 中 

glUniformMatrix4fv(mvLoc, 1, GL_FALSE, glm::value_ptr(mvMat)) ; 
glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(pMat) ) ; 
glUniformMatrix4fv(nLoc, 1, GL_FALSE , glm::value_ptr(invTrMat) ); 














// 激活 环 面 顶点 缓冲 区 ， 如 前 
glBindBuffer(GL_ARRAY_BUFFER, vbo[1]); 
glVertexAttribPointer(@, 3, GL_FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray(@) ; 




















// 我 们 需要 激活 环 面 法 向 量 缓冲 区 
g1BindBuffer(GL_ARRAY_BUFFER, vbo[2]); 
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, ©, @); 
glEnableVertexAttribArray(1) ; 








// 环 面 纹理 现在 是 立方 体贴 图 
glActiveTexture(GL TEXTUREQ); 
glBindTexture(GL TEXTURE CUBE MAP, skyboxTexture); 











// 绘制 环 面 的 过 程 未 做 更 改 
glClear(GL_DEPTH_BUFFER_BIT); 

















glEnable(GL_CULL_FACE); 
glFrontFace(GL_CCw); 
glDepthFunc(GL_LEQUAL) ; 


glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vbo[3]); 
glDrawElements(GL_TRIANGLES, numTorusIndices, GL_UNSIGNED_INT, @); 
} 


顶点 着 色 器 

#version 430 

layout (location = 6) in vec3 position; 

layout (location = 1) in vec3 normal; 

out vec3 varyingNormal; 

out vec3 varyingVertPos; 

uniform mat4 mv_matrix; 

uniform mat4 proj_matrix; 

uniform mat4 norm_matrix; 

layout (binding = 6) uniform samplerCube tex_map; 

















void main(void) 

{ varyingVertPos = (mv_matrix * vec4(position,1.@)).xyz; 
varyingNormal = (norm_matrix * vec4(normal,1.0)).xyz; 
gl Position = proj matrix * mv_matrix * vec4(position,1.@); 


} 
片段 着 色 器 


#version 430 

in vec3 varyingNormal ; 

in vec3 varyingVertPos; 

out vec4 fragColor; 

uniform mat4 mv_matrix; 

uniform mat4 proj_matrix; 

uniform mat4 norm_matrix; 

layout (binding = 6) uniform samplerCube tex_map; 





void main(void) 
{ vec3 r = -reflect(normalize(-varyingVertPos), normalize(varyingNormal) ) ; 
fragColor = texture(tex_map, r); 


} 








虽然 该 场景 需要 两 组 着 色 器 一 一 一 组 用 于 立方 体贴 图 ， 男 一 组 用 
于 环 面 一 一 但 是 程序 9.3 中 仅 展 示 了 用 于 绘制 环 面 的 着 色 器 。 这 是 因为 
用 于 泻 染 立方 体贴 图 的 着 色 器 与 程序 9.2 中 的 相同 。 通 过 对 程序 9.2 的 修 














改 得 到 程序 9.3 的 过 程 ， 总 结 如 下 。 


在 init0) 函 数 中 : 


创建 环 面 的 法 问 量 缓冲 区 [实际 上 在 setupVertices() 中 完成 ， 由 init() 
调用 ]; 
不 再 需要 环 面 的 纹理 坐标 缓冲 区 。 





fédisplay() K UF : 


创建 用 于 变换 法 同 量 的 矩阵 (在 第 7 章 中 称 为 “norm_matrix”) 并 将 
其 连接 到 关联 的 统一 变量 ; 

激活 环 面 法 同 量 绥 冲 区 ; 

激活 纹理 立方 体贴 图 为 环 面 的 纹理 (而 非 之 前 的 “ 砖 * 纹 理 ) 。 


在 顶点 着 色 器 中 : 


将 法 向 量 和 norm_matrix 相 加 ; 
输出 变换 的 顶点 和 法 癌 量 以 备 计算 反射 问 量 ， 与 在 照明 和 阴影 章 
中 所 做 的 相似 。 


在 片段 着 色 器 中 : 


以 与 照明 章节 中 相似 的 方式 计算 反射 问 量 ; 
从 纹理 〈 现 在 是 立方 体贴 图 ) 检索 输出 颜色 ， 使 用 反射 向 量 而 非 纹 
理 坐 标 进行 查找 。 








图 9.10 中 显示 的 泻 染 结果 是 一 个 很 好 的 例子 ， 展 示 了 通过 简单 的 技 
巧 能 够 实现 强大 的 约 沉 。 通 过 在 对 象 上 简单 地 绘制 背景 ， 我 们 使 对 象 看 
起 来 有 “金属 质感 ”， 而 根本 没有 进行 ADS 材 质 建 模 。 即 使 没有 任何 ADS 





照明 被 整合 到 场景 中 ， 这 种 技巧 也 能 让 人 感觉 光 从 物体 反射 出 来 。 在 这 
个 例子 中 ， 我 们 甚至 会 感到 在 环 面 的 左下 方 似乎 有 一 个 镜面 高 光 ， 因 为 
立方 体贴 图 中 包括 太阳 在 水 中 反射 的 倒影 。 





补充 说 明 


正如 我 们 在 第 5 草 中 第 一 次 研究 纹理 时 的 情况 一 样 ， 使 用 SOIL2 使 
得 构建 立方 体贴 图 和 为 立方 体贴 图 添加 纹理 变 得 容易 。 同 时 它 也 可 能 会 
有 一 些 副 作用 ， 即 阻挡 用 户 学习 一 些 有 用 的 OpenGL 细 节 内 容 。 当 然 ， 
用 户 也 可 以 在 没有 SOIL2 的 情况 下 实例 化 并 加 载 OpenGL 立 方 体 贴图 。 
虽然 该 主题 超出 了 本 书 的 范围 ， 但 基本 步骤 如 下 : 











(1) 使 用 C++ 工具 读 取 6 个 图 像 文件 〈 它 们 必须 是 正方 形 ) ; 
(2) 使 用 glGenTexturesO) 为 立方 体贴 图 创建 纹理 及 其 整 型 引用 ; 


(3) 调用 glBindTexture0， 指 定 纹理 的 ID 和 
GL_TEXTURE CUBE MAP; 


(4) 使 用 glTexStorage2D0 指 定 立 方 体 贴图 的 存储 需求 ; 


(5) 调用 glTexImage2D0 或 glTexSubImage2D0O 将 图 像 分 配给 立方 
体 的 各 个 面 。 





更 多 有 关 在 没有 SOIL2 的 情况 下 创建 OpenGL 立 方 体贴 图 的 详细 信 
息 ， 请 浏览 互联 网 上 的 一 些 相 关 教 程 [1 [GE16], 





如 本 章 所 述 ， 环 境 贴图 的 主要 限制 之 一 是 它 只 能 构建 反射 立方 体贴 
图 内 容 的 对 象 。 在 场景 中 泻 染 的 其 他 对 象 并 不 会 出 现在 使 用 贴图 模拟 反 
财 的 对 象 中 。 这 种 限制 是 否 可 以 接受 取决 于 场景 的 性 质 。 如 末 场 景 中 存 
在 必须 出 现在 镜面 或 铬 制 对 象 中 的 对 象 ， 则 必须 使 用 其 他 方法 。 一 种 当 
见 的 方法 是 使 用 模板 缓冲 区 (在 第 8 章 中 有 提 到 〉 ， 许 多 网 络 教程 ( 例 
如 [V1 于 、[NEI1 和 和 [GR16]) 中 都 有 描述 ， 不 过 它 超出 了 本 书 的 范围 。 











我 们 没有 介绍 天 空 穹顶 的 实现 ， 虽 然 它们 在 某 些 方面 可 以 说 比 天 空 
盒 更 简单 ， 并 且 不 易 受 到 失真 的 影响 ， 甚 至 用 它 实现 环境 贴图 也 更 简单 
至 少 在 数学 上 一 -但 OpenGL 对 立方 体贴 图 的 支持 常常 使 得 天 空 盒 
更 加 实用 。 

















在 书后 面部 分 涵盖 的 主题 中 ， 天 空 合 和 天 疾 在 概念 上 可 以 说 是 最 简 
单 的 。 然 而 ， 让 它们 看 起 来 令 人 信服 可 能 会 耗费 大 量 时 间 。 我 们 只 简要 
介绍 了 可 能 出 现 的 一 些 问题 “例如 接 颖 ) ， 但 根据 使 用 的 纹理 图 像 文 
件 ， 可 能 会 出 现 其 他 问题 ， 需 要 额外 修复 。 尤 其 是 在 动画 场景 中 或 相机 
可 以 通过 交互 进行 移动 时 。 


我 们 还 大 致 介绍 了 如 何 生成 可 用 且 令 人 信服 的 纹理 立方 体贴 图 图 
像 。 这 方面 有 许多 优秀 的 工具 ， 其 中 最 受 欢 迎 的 是 Terragen [TE16]。 本 章 
中 的 所 有 立方 体贴 图 均 由 作者 使 用 Terragen 制 作 (图 9.6 中 的 星 域 图 除 
外 ) 。 





习题 





9.1 CHH) 在 程序 9.2 中 ， 添 加 使 用 鼠标 或 键盘 移动 相机 的 功 
能 。 为 此 ， 你 需要 使 用 先前 在 习题 4.2 中 开发 的 代码 来 构建 视图 矩阵 。 
还 要 为 前 后 移动 以 及 绕 各 轴 旋 转 相 机 的 功能 分 配 鼠 标 或 键盘 操作 (你 需 
要 编写 这 些 函 数 ) 。 完 成 这 些 操 作 后 ， 你 应 该 能 够 在 场景 中 “ 飞 来 飞 
去 ”， 并 能 够 注意 到 天 空 盒 始终 看 起 来 保持 在 遥远 的 地 平 线 上 。 





9.2 ”在 6 个 立方 体贴 图 图 像 文 件 上 绘制 标签 ， 以 确认 实现 中 使 用 了 
正确 的 方 辐 。 例 如 ， 你 可 以 在 图 像 上 绘制 轴 标 签 ， 如 图 9.11 所 示 。 





图 9.11 6 个 立方 体贴 图 


还 可 以 使 用 "“ 带 标记 的 ?立方 体贴 图 来 验证 环境 贴图 环 面 中 的 反射 是 
TEMEI. 


93 ”【〔 项 目 ) 同 程序 9.3 添 加 动画 ， 以 便 场景 中 的 一 个 (或 多 个 ) 
使 用 了 环境 贴图 的 对 象 旋转 或 翻转 。 当 天 空 盒 纹 理 在 物体 表面 上 移动 
时 ， 物 体 的 模拟 反射 性 质 会 更 明显 。 


9.4 CHH) 修改 程序 9.3， 以 使 场景 中 的 对 象 将 环境 贴图 与 纹理 
混合 。 在 片段 着 色 器 中 加 权 求 和 ， 如 第 7 章 中 所 述 。 


9.5 《研究 和 项 目 ) 了 解 使 用 Terragen [TF16| 创 建 简单 立方 体贴 图 
的 基础 知识 。 通 常 需要 (在 Terragen 中 ) 制作 具有 所 需 地 形 和 大 气 模 式 


的 “世界 ”， 然 后 将 Terragen 的 合成 相机 放置 在 前 、 后 、 右 、 左 、 顶 部 和 
底部 以 保存 作为 各 视图 的 6 个 图 像 。 在 程序 9.2 和 程序 9.3 中 使 用 新 生成 的 
图 像 ， 观 察 它 们 作为 立方 体贴 图 和 环境 贴图 呈现 的 外 观 。 使 用 Terragen 
的 免费 版 本 足以 进行 此 练习 。 
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[1] 同样 的 技巧 也 适用 于 通过 对 反光 物体 添加 天 空 写 顶 纹理 图 像 来 用 天 
TS MERR TARIE. 


第 10 革 ”增强 表面 细 市 








假设 我 们 想 要 对 不 规则 表面 的 物体 进行 建 模 ， 例 如 橘子 凹凸 的 表 
皮 、 和 葡萄 干 裙 皱 的 表面 或 月 球 的 陨石 坑 表 和 面 。 我 们 该 怎么 做 ?到 目前 为 
止 ， 我 们 已 经 学 会 了 两 种 可 能 的 方法 : aD 我 们 可 以 对 整个 不 规则 表 
面 进行 建 模 ， 但 这 么 做 通常 不 切实 际 〈 一 个 有 许多 坑 的 表面 需要 大 量 的 
顶点 ) ; Cb) 我 们 可 以 将 不 规则 表面 的 纹理 图 图 像 应 用 于 平滑 的 对 
象 。 第 二 种 选择 通常 比较 高 效 。 但 是 ， 如 果 场 景 中 有 光源 ， 当 光源 (或 
摄像 机 角度 ) 移动 时 ， 我 们 很 快 焉 会 发 现 物体 使 用 了 静态 纹理 演 染 《以 
及 物体 表面 是 平滑 的 ) ， 因 为 纹理 上 的 亮 区 和 蜡 区 不 会 像 真 正 凹 上 囊 不 平 
的 表面 那样 ， 随 着 光源 或 摄像 机 移动 而 改变 。 


在 本 章 中 ， 我 们 将 探讨 几 种 与 实现 止 凸 表面 相关 的 方法 ， 通 过 使 用 
光照 效果 ， 即 使 在 实际 对 象 模 型 表面 平滑 的 情况 下 ， 也 能 使 对 象 看 起 来 
AAA AACE. RT FO KAZAA, SRA 
对 象 添加 人 微小 表面 细 市 会 使 得 计算 代价 过 高 时 ， 它 们 可 以 为 场景 中 的 对 
象 增加 相当 程度 的 真实 感 。 我 们 还 将 研究 通过 高 度 贴图 实际 扰乱 光滑 表 
面 中 顶点 的 方法 ， 这 对 于 生成 地 形 〈 和 其 他 一 些 用 途 ) 非常 有 用 。 























10.1 Yow 


在 第 7 章 中 ， 我 们 了 解 了 表面 法 同 量 在 创建 令 人 信服 的 光照 效果 中 


征 至 天 重要 的 。 像 素 处 的 光 强 度 主 要 由 反射 角 确 定 ， 即 需要 考虑 到 光源 
位 置 、 相 机 位 置 和 像素 处 的 法 向 量 。 因 此 ， 如 果 我 们 能 找到 生成 相应 法 
回 量 的 方法 ， 束 可 以 避免 生成 与 凹 巴 不 平 或 裙 邹 表面 相对 应 的 顶点 。 


图 10.1 展 示 了 对 于 单个 “ 凸 起 ”修改 法 同 量 的 概念 。 


ana Ciu 


在 真实 凸 起 上 的 法 向 量 


r 
jp ~ 
pa N 
~~ 
ee oh el ls = D A E E a 
~ 


在 平坦 表面 上 的 法 向 量 


一 一 ~ 
gr ~、 
bg s 
2 N 
-个 个 个 个 个 个 NAN 人 个 全 了 NAA 个 个 个 个 个 个 


修改 (“扰动 ”) 后 的 法 向 量 














图 10.1 用 于 四 凸 贴图 的 扰动 法 向 量 











因此 ， 如 果 我 们 想 让 一 个 物体 看 起 来 好 像 有 四 凸 (或 皱纹 ， 陨 石 坑 
等 ) ， 一 种 方法 是 计算 当 表 面 确实 凹凸 不 平时 其 上 的 法 问 量 。 当 场景 点 
亮 时 ， 光 照会 让 人 产生 我 们 所 期 望 的 约 沉 。 这 是 Blinn 在 1978 年 首次 提 
出 的 BL， 随 着 在 片段 着 色 器 拥有 了 可 以 对 每 个 像素 进行 光照 计算 的 
能 力 ， 这 种 方法 就 变 得 切实 可 行 了 。 














程序 10.1 中 展示 了 顶点 厦 色 器 和 片段 着 色 右 的 一 个 示例 ， 这 上段 程序 
会 生成 一 个 带 有 “高 尔 夫 球 ”表面 的 环 面 ， 如 图 10.2 所 示 。 其 代码 几乎 与 
我 们 之 前 在 程序 7.2 中 看 到 的 相同 。 片 段 着 色 右 中 唯一 显著 的 变化 是 








一 一 输入 的 已 插值 法 同 量 (在 原 程序 中 名 为 “varyingNormal”〉 在 这 里 变 
得 四 凸 不 平 了 ， 甚 方法 是 对 环 面 模型 的 原始 《未 变形 ) WAX YMZ 
轴 应 用 正弦 函数 。 请 注意 ， 这 里 需要 顶点 着 色 器 将 未 经 变换 的 顶点 沿 管 
RE EA ARA a o 








A102 ”过 程式 凹凸 贴图 示例 








以 这 种 方式 对 法 向 量 进行 改变 ， 即 在 运行 时 使 用 数学 函数 进行 计 
算 ， 称 为 过 程式 凹凸 贴图 。 


程序 10.1 过 程式 凹凸 贴图 





顶点 着 色 器 





#version 430 
// 与 Phong 着 色相 同 ， 但 添加 此 输出 顶点 属性 


out vec3 originalVertex; 











a ely 
{ // 添加 原始 项 点 ， 传 递 以 进行 插值 


originalVertex = vertPos; 








l aa 
片段 着 色 器 


#version 430 





// 与 Phong 着 色相 同 ， 但 添加 此 输入 项 点 属性 


in vec3 originalVertex; 











Gord aad 
ere 
// 添加 如 下 代码 以 扰乱 传 入 的 法 向 量 








float a = 0.25; // a 控制 凸 起 的 高 度 
float b = 100.0; // b 控制 凸 起 的 宽度 
float x = originalVertex.x; 
float y = originalVertex.y; 
float z = originalVertex.z; 





N.x = varyingNormal.x + a*sin(b*x); // 使 用 正弦 函数 扰乱 传 入 法 向 量 
-y = varyingNormal.y + a*sin(b*y); 
Zz = 





varyingNormal.z + a*sin(b*z); 
normalize(N); 


/ 光照 计算 以 及 输出 的 fragColor (未 更 改 ) 现在 使 用 扰动 过 的 法 向 量 N 





10.2 ”法 线 贴 图 


四 号 贴图 的 一 种 丛 代 方法 是 使 用 查找 表 来 丛 换 法 向 量 。 这 样 我 们 就 
可 以 在 不 依赖 数学 函数 的 情况 下 ， 对 是 起 进行 构造 ， 例 如 月 球 上 的 陨石 
坑 所 对 应 的 凸 起 。 一 种 使 用 查找 表 的 和 常见 方法 叫 作法 线 贴图 。 








为 了 理解 法 线 贴图 的 工作 原理 ， 我 们 首先 注意 ， 癌 量 通 过 3 字 市 存 
储 ， 铸 、Y 和 2 分 量 各 占 1 字 广 ， 束 可 以 达到 合理 的 精度 。 这 样 ， 我 们 区 
可 以 将 法 癌 量 存储 在 彩色 图 像 文 件 中 ， 其 中 R、G 和 B 分 量 分 别 对 应 于 
X、Y 和 Z。 图 像 中 的 RGB 值 以 字 节 存储 ， 通 常 被 解释 为 [0..….1] 范 围 内 的 
值 ， 但 是 向 量 可 以 有 正 负 值 分 量 。 如 果 我 们 将 法 向量 分 量 限制 在 [-1..… 
+1] 范 围 内 ， 那 么 在 图 像 文件 中 将 法 向 量 N 存 储 为 像素 的 简单 转换 是 : 

















R = (Nx + 1)/2 
G = (Ny + 1)/2 
B = (Nz + 1)/2 
法 线 贴图 使 用 一 个 图 像 文件 ( 称 为 法 线 贴图 ) ， 该 图 像 文件 包含 在 
光照 下 所 期 望 表面 外 观 的 法 向 量 。 在 法 线 贴图 中 ， 向 量 相对 于 任意 平 
面 XY 表 示 ， 其 X 和 Y 分 量 表示 与 “垂直 ”的 偏差 ， 其 2Z 分 量 设置 为 1， 严 格 
垂直 于 XY 平面 的 向 量 〈( 即 没有 偏差 ) 将 表示 为 (0, 0, 1) ， 而 不 垂直 的 
器 量 将 具有 非 零 的 X 和 /或 Y 分 量 。 我 们 需要 使 用 上 面 的 公式 将 值 转换 至 
RGB 空 间 ; 例如 ， (0,0, D 将 存储 为 (0.5, 0.5, 1) ， 因 为 实际 偏 移 的 
范围 为 [-1...+1]， 而 RGB 值 的 范围 为 [0...1]。 























我 们 可 以 通过 纹理 单元 的 另 一 种 妙用 来 生成 这 样 一 幅 法 线 贴图 : 我 
们 在 纹理 单元 中 存储 所 需 的 法 疝 量 而 非 颜色 。 然 后 ， 在 给 定 片段 中 ， 我 
们 就 可 以 使 用 采样 器 从 法 线 贴 图 中 查找 值 ， 接 下 来 ， 我 们 将 所 得 的 值 作 
为 法 向 量 ， 而 非 输出 像素 颜色 在 纹理 贴图 中 我 们 是 这 么 做 的 )。 





图 10.3 展 示 了 一 个 法 线 贴图 图 像 文件 的 例子 ， 通 过 将 GIMP 法 线 贴 
图 插件 G16J 应 用 于 Luna 上 516 纹理 而 生成 。 法 线 贴图 图 像 文件 并 不 适合 
作为 图 像 碍 看 ， 我 们 展示 这 幅 图 惑 是 为 了 指明 这 一 点 ， 法 线 贴 图 最 终 看 
起 来 基本 都 是 蓝 色 的 。 这 是 因为 图 像 文件 中 每 个 像素 的 B 值 (更 色 值 ) 
都 是 1 最 大 蓝 色 值 )， 这 会 让 它 在 作为 图 像 时 看 起 来 是 “ 蓝 色 的 ”。 








图 10.3 ”法 线 贴图 图 像 文 件 示例 [ME1] 





图 10.4 展 示 了 两 个 不 同 的 法 线 贴图 图 像 文件 (它们 都 由 Luna [ul6l 
的 纹理 构建 ) 以 及 在 Blinn-Phong 光 照 模型 下 将 它们 应 用 于 球体 的 结 





图 10.4 ”法 线 贴图 示例 


从 法 线 贴图 碍 找到 的 法 同 量 不 能 直接 使 用 ， 因 为 它们 是 相对 于 上 述 
的 任意 XY 平 面 定 义 的 ， 并 没有 考虑 它们 在 物体 上 的 位 置 以 及 在 相机 空间 
中 的 方向 。 这 个 问题 的 解决 策略 是 建立 一 个 转换 窍 阵 ， 用 于 将 法 同 量 转 
换 为 相机 空间 ， 如 下 所 示 。 





在 对 象 的 每 个 顶点 处 ， 我 们 考虑 与 对 象 相 切 的 平面 。 顶 点 处 的 物体 
的 法 同 量 垂直 于 该 切面 。 我 们 在 该 切面 中 定义 两 个 相互 垂直 的 网 量 ， 同 
时 也 垂直 于 法 问 量 ， 称 为 切 癌 量 和 副 切 问 量 《有 时 称 为 副 法 问 量 ) 。 构 
造 我 们 期 望 的 变换 矩阵 要 求 我 们 的 模型 包括 每 个 项 点 的 切 问 量 〈 可 以 通 
过 计算 切 癌 量 和 法 同 量 的 又 积 来 构建 副 切 问 量 ) 。 如 果 模 型 中 没有 定义 
切 向 量 ， 则 需要 通过 计算 得 到 它们 。 在 球体 的 情况 下 ， 可 以 通过 计算 得 
到 精确 的 切 问 量 。 以 下 是 对 程序 6.1 的 修改 : 











for (int i=@; i<=prec; i++) { 
for (int j=0; j<=prec; j++) { 

float y = (float)cos(toRadians(180.0f - i*180.0f / prec)); 

float x = -(float)cos(toRadians(j*360.0f / prec)) * (float)abs(cos(a 
sin(y))); 

float z = (float)sin(toRadians(j*360.0f / prec)) * (float)abs(cos(as 
in(y))); 

vertices[i*(prec+1)+j] = glm::vec3(x, y, z); 

// 计算 切 向 量 

if (((x==@) && (y==1) && (z==0)) || ((x==@) && (y==-1) && (z==6))) / 
/ 如 果 是 北极 或 南极 ， 

{ tangent[i*(prec+1)+j] = glm::vec3(@0.0f, @.0f, -1.0Ff); // 

设置 切 向 量 为 -Z 轴 

} 

else // 人 否则， 计算 切 向 量 

{ tangent[i*(prec+1)+j] = glm::cross(glm::vec3(6.6f，1.6f，6.6f)， 
glm: :vec3(x,y,Z))5; 

} 


. // 其 余 计算 代码 不 变 
































对 于 那些 表面 不 可 叶 以 至 于 无 法 精确 求解 切身 量 的 模型 ， 其 切 问 量 
可 以 通过 近似 得 到 ， 例 如 在 构造 (或 加 载 ) 模型 时 ， 将 每 个 项 点 指 同 下 
一 个 顶点 的 回 量 作为 切 问 量 。 请 注意 ， 这 种 近似 可 能 会 导致 切 癌 量 与 顶 





点 法 癌 量 不 严格 垂直 。 因 此 ， 如 果 要 实现 适用 于 各 种 模型 的 法 线 贴 图 ， 
需要 考虑 这 种 可 能 性 (我 们 的 解决 方 采 中 对 此 进行 了 处 理 ) 。 


切 问 量 与 顶点、 纹理 坐标 以 及 法 问 量 一 样 ， 是 从 缓冲 区 (VBO) fk 
递 到 顶点 着 色 器 中 的 顶点 属性 。 然 后 ， 顶 点 着 色 需 通过 应 用 MV 和 矩阵 的 
逆转 置 并 将 结果 沿 厦 流水 线 转 肥 以 由 光栅 器 进行 插值 并 最 终 进 入 片段 看 
色 右 ， 从 而 对 正常 向 量 进行 处 理 。 首 转 置 的 应 用 将 法 向 量 和 切 向 量 转 换 
为 相机 空间 ， 之 后 我 们 使 用 又 积 构造 副 切 向 量 。 








一 旦 我 们 在 相机 空间 中 得 到 法 向 量 、 切 向 量 和 副 切 向 量 ， 就 可 以 使 
用 它们 来 构造 矩阵 〈( 依 其 分 量 命名 为 TBN” 和 矩阵 ) ， 该 矩阵 用 于 将 从 法 
线 贴图 中 检索 到 的 法 向 量 转 换 为 在 相机 空间 中 相对 于 物体 表面 的 法 向 


i=! 


里 。 


在 片段 着 色 器 中 ， 新 法 同 量 的 计算 在 calcNewNormal() 函 数 中 完 
成 。 函 数 的 第 三 行 [包含 dot (tangent, normal) ] 的 计算 确保 切 向 量 垂 
直 于 法 同 量 。 新 的 切 同 量 和 法 同 量 的 叉 积 束 是 副 切 癌 量 。 








然后 ， 我 们 创建 一 个 类 型 为 mat3 的 3x3 和 矩 阵 ， 作 为 TBN。mat3 构 造 
函数 接收 3 个 向 量 作为 参数 ， 生 成 一 个 矩阵 ， 其 中 项 行 是 第 一 个 向 量 ， 
中 间 行 是 第 二 个 向 量 ， 底 行 是 第 三 个 向 量 〈 类 似 于 从 摄像 机 位 置 构建 视 
图 和 矩阵， 见 图 3.13) 。 

















着 色 器 使 用 片段 的 纹理 坐标 来 提取 与 当前 片段 对 应 的 法 线 贴图 单 
元 。 着 色 器 在 提取 时 使 用 采样 费 变 量 “mormMap”， 并 被 绑 定 到 纹理 蛙 元 
0 注意 ; 因此 在 C++ /OpenGL 应 用 程序 中 必须 将 法 线 贴图 图 像 附加 到 





纹理 单元 0) 。 因 为 需要 将 颜色 分 量 从 纹理 中 存储 范围 [0...H 转 换 为 其 原 
始 范围 [-1 .+ 1]， 我 们 将 其 乘 以 2.0 再 减 去 1.0。 











然后 将 TBN 和 矩阵 应 用 于 所 得 法 向 量 以 产生 当前 像素 的 最 终 法 向 量 。 
着 色 器 的 其 余部 分 与 用 于 Phong 光 照 的 片段 着 色 器 相同 。 片 段 着 色 器 代 
码 基 于 Etay Meiri IME1 的 版 本 ， 如 程序 10.2 所 示 。 


制作 法 线 贴图 图 像 可 以 使 用 各 种 各 样 的 工具 。 有 的 图 像 编辑 工具 就 
有 制作 法 线 贴图 的 功能 ， 例 如 GIMP [S116j 和 Photoshop !PH16]。 它 们 通过 
分 析 图 像 中 的 边缘 ， 推 断 凸 起 和 辐 陷 ， 并 产生 相应 的 法 线 贴 图 。 





图 10.5 显 示 了 由 Hastings-Trew II16 基 于 NASA 卫 星 数 据 创建 的 月 面 
纹理 图 。 其 相应 的 法 线 贴 图 由 GIMP 法 线 贴图 插件 [cg16]， 通 过 处 理由 
Hastings-Trew 创 建 的 黑白 版 本 月 面 纹理 图 生成 。 








程序 10.2 ”法 线 贴图 片段 着 色 器 














#version 430 

in vec3 varyingLightDir ; 
in vec3 varyingVertPos; 

in vec3 varyingNormal; 

in vec3 varyingTangent; 

in vec3 originalVertex; 

in vec2 tc; 

in vec3 varyingHalfVector; 
out vec4 fragColor; 


layout (binding=@) uniform sampler2D normMap; 


// 其 余 统一 变量 同 前 





vec3 calcNewNormal() 

{ vec3 normal = normalize(varyingNormal) ; 
vec3 tangent = normalize(varyingTangent) ; 
tangent = normalize(tangent - dot(tangent, normal) * normal); // WHE 


直 于 法 向 量 
































vec3 bitangent = cross(tangent, normal); 





mat3 tbn = mat3(tangent, bitangent, normal); // 用 来 变换 到 相机 空间 的 
TBNAE J 

vec3 retrievedNormal = texture(normMap,tc).xyz; 

retrievedNormal = retrievedNormal * 2.0 - 1.0; // 从 RGB 衬 间 转换 


vec3 newNormal = tbn * retrievedNormal; 
newNormal = normalize(newNormal) ; 
return newNormal; 


} 


void main(void) 

{ // 正规 化 光照 向 量 ， 法 向 量 和 视图 向 量 
vec3 L = normalize(varyingLightDir); 
vec3 V = normalize(-varyingVertPos); 
vec3 N = calcNewNormal(); 








TTI 









































// 获得 光照 向 量 和 曲面 法 向 量 之 间 的 角度 
float cosTheta = dot(L,N); 

















// 为 Blinn 优 化 计算 半 向 量 


vec3 H = normalize(varyingHalfVector) ; 








// 视图 向 量 和 反射 光 向 量 之 间 的 角度 
float cosPhi = dot(H,N); 








// 计算 ADS 页 献 (每 个 像素 ) 

fragColor = globalAmbient * material.ambient 

+ light.ambient * material.ambient 

+ light.diffuse * material.diffuse * max(cosTheta,0.0) 

+ light.specular * material.specular * pow(max(cosPhi,60.60), material.shi 
niness*3.0); 


} 








图 10.5 月 球 纹理 (上 )〉 和 法 线 贴图 (下 ) 





图 10.6 展 示 了 使 用 两 种 不 同方 式 泻 染 的 ， 用 以 表现 月 球 表 面 的 球 
体 。 图 10.6 均 图 中 ， 球 体 使 用 了 原始 的 纹理 贴图 ， 图 10.6 右 图 中 ， 球 体 
使 用 法 线 贴 图 的 图 像 作为 纹理 〈 供 参考 ) 。 它 们 都 没有 应 用 法 线 贴图 。 
虽然 左 侧 使 用 了 纹理 的 “月 球 ? 非 常 盘 真 ， 但 仔细 观察 可 以 发 现 ， 纹 理 图 
案 很 明显 拍摄 于 阳光 从 左 侧 照 亮 月 球 的 时 候 ， 因 为 其 山 兰 的 阴影 投射 到 
了 右 侧 《〈 在 底部 中 心 附近 的 火山 口中 最 明显 ) 。 如 果 我 们 使 用 Phong 痢 
色 为 此 场景 添加 光照 ， 然 后 移动 月 球 、 相 机 或 灯光 来 给 场景 添加 动画 ， 
就 会 发 现 月 球 上 的 阴影 不 会 如 我 们 期 望 地 改变 。 





此 外 ， 随 着 光源 的 移动 (或 相机 移动 )》， 期 望 中 会 在 山 辱 上 出 现 许 
多 镜面 高 光 。 但 是 图 10.6 左 图 使 用 了 标准 纹理 的 球体 将 只 产生 一 个 镜面 
高 光 ， 对 应 于 光滑 球体 上 所 出 现 的 高 光 ， 这 看 起 来 非常 不 现实 。 配 合法 
线 贴图 可 以 显著 提高 这 类 对 象 在 光照 下 的 真实 感 。 


























图 10.6 ”使 用 月 面 纹理 的 球体 〈 左 ) 和 使 用 法 线 贴 图 的 球体 〈 右 ) 





当 我 们 在 球体 上 使 用 法 线 贴 图 〈 而 不 是 纹理 ) 时 ， 我 们 会 得 到 图 
10.7 所 示 的 结果 。 尽 管 它 不 像 标准 纹理 那么 真实 《〈 现 在 ) ， 但 是 现在 筷 
确实 啊 应 了 光照 变化 。 图 10.7 的 第 一 张 图 像 中 从 左 侧 进行 光照 ， 第 二 张 
图 像 中 则 从 右 侧 进行 光照 。 请 注意 瘟 色 和 黄色 箭头 所 示 部 分 展示 了 山 将 
周围 漫 反 射 光 的 变化 以 及 镜面 反射 高 光 的 移动 。 





图 10.7 ”法 线 贴图 对 月 球 的 影响 


图 10.8 展 示 了 在 使 用 Phong 光 照 模型 的 情况 下 ， 将 法 线 贴图 与 标准 
纹理 相 结合 的 效果 。 月 球 的 图 像 通 过 漫 射 区 域 进行 了 增强 ， 镜 面 高 区区 
域 也 会 啊 应 光源 的 移动 (或 相机 或 物体 移动 )。 两 个 图 像 中 的 光照 分 别 
来 目 左 侧 和 右 侧 。 








图 10.8 纹理 加 法 线 贴图 ， 分 别 从 左 侧 和 右 侧 进行 光照 


我 们 的 程序 现在 需要 两 个 纹理 一 一 一 个 用 于 月 球 表面 图 像 ， 一 个 
用 于 法 线 贴图 一 一 因此 需要 有 两 个 采样 占 。 片 段 着 色 器 使 用 之 前 在 7.6 
节 中 所 描述 的 技术 ， 将 纹理 颜色 与 经 光照 计算 所 得 的 颜色 进行 混合 ， 如 


程序 10.3 所 示 。 


程序 10.3 ”纹理 加 法 线 贴图 














// 片段 着 色 器 中 的 变量 和 结构 与 之 前 相同 ， 加 上 
layout (binding=6) uniform sampler2D s6; // 法 线 贴图 
layout (binding=1) uniform sampler2D s1; // 纹理 
void main(void) 


{ // 计算 与 之 前 相同 ， 直 到 




















vec3 N = calcNewNormal(); 
vec4 texel = texture(si1,tc); // 标准 纹理 




















// 反射 计算 与 之 前 相同 ， 然 后 混合 结果 
fragColor = globalAmbient + 
texel * (light.ambient + light.diffuse * max(cosTheta,@.@) 
+ light.specular * pow(max(cosPhi,®@.@), material.shininess) ) ; 








有 趣 的 是 ， 法 线 贴图 可 以 从 多 级 渐 远 纹理 贴图 (Mipmapping〉 中 受 
荔 ， 因 为 在 第 5 半 中 看 到 的 纹理 化 产生 的 “锯齿 ” 伪 影 ， 在 使 用 纹理 图 像 
进行 法 线 贴 图 时 也 会 有 发生。 图 10.9 分 别 展示 了 未 使 用 多 级 渐 远 纹理 贴图 
和 使 用 了 多 级 渐 远 纹理 贴图 进行 法 线 贴 图 的 月 球 。 尽 管 在 静止 的 图 像 中 
不 容易 观 峙 到 ， 但 是 左边 的 球体 〈 未 使 用 多 级 渐 远 纹理 贴图 ) 周边 有 内 
PRAT o 








图 10.9 ”发现 贴图 伪 影 ， 以 及 使 




















j 多 级 渐 远 纹理 贴图 校 





E 后 的 图 像 


对 于 法 线 贴图 而 言 ， 各 疝 异 性 过 小 (AF)〉 更 有 效 ， 它 不 但 减少 了 
闪烁 的 伪 影 ， 同 时 还 保留 了 细节 ， 如 图 10.10 所 示 《比较 右 下 角 边 缘 的 
细节 ) 。 图 10.11 中 展示 了 使 用 相等 的 纹理 权重 和 光照 权重 ， 光 照应 用 
了 法 线 贴 图 及 AF 的 情况 下 得 到 的 结果 。 


























110.10 ”使 用 各 向 异性 过 滤 进 行 法 线 贴图 








图 10.11 纹理 加 各 向 异性 过 滤 法 线 贴图 








最 终 的 泻 染 结果 并 不 完美 。 无 论 光照 如 何 ， 原 始 纹 理 图 像 中 出 现 的 
阴影 仍 将 显示 在 泻 染 结果 上 。 此 外 ， 虽 然 法 线 贴 图 可 以 影响 漫 反 射 和 锁 
面 反 射 效 果 ， 但 它 无 法 投射 阴影 。 因 此 ， 当 表面 特征 较 小 时 ， 最 适用 法 
线 贴图 。 


10.3 ”高 度 贴图 








现在 我 们 扩展 法 线 贴图 的 概念 一 一 从 纹理 图 像 用 于 扰动 法 向 量 到 扰 
乱 顶 点 位 置 本 里 。 实 际 上 ， 以 这 种 方式 修改 对 象 的 几何 体 上 共有 一 定 的 优 
势 ， 例 如 使 表面 特征 沿 着 对 象 的 边缘 可 见 ， 并 使 特征 能 够 啊 应 阴影 贴 
图 。 我 们 将 会 看 到 ， 它 还 可 以 帮助 构建 地 形 。 








一 种 实用 的 方法 是 使 用 纹理 图 像 来 存储 高 度 值 ， 然 后 使 用 该 高 度 值 
来 提升 “或 降低 ) 顶点 位 置 。 含 有 高 度 信息 的 图 像 称 为 高 度 网 ， 使 用 高 
度 图 更 改 对 象 的 顶点 的 方法 称 为 高 度 贴图 趾 。 高 度 图 通常 将 高 度 信息 编 











码 为 灰 度 颜色 : (0,00) CHE) = 低 高 度 ，(1,1,1) (ÁE) = 高 高 
度 。 这 样 一 来 通过 算法 或 使 用 “画图 ”程序 就 可 以 轻松 创建 高 度 图 。 图 像 
的 对 比 度 越 高 ， 其 表示 的 高 度 变 化 越 大 。 这 些 概念 将 在 图 10.12( 显 示 
随机 生成 的 地 图 ) 和 图 10.13( 显 示 有 组 织 的 模式 的 地 图 〉 中 说 明 。 











图 10.12 ”高 度 图 示例 
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图 10.13 AEWRE 





改变 顶 反 位 置 是 否 有 用 取决 于 改变 的 模型 。 顶 点 操作 可 以 在 项 点 看 
色 器 中 轻松 完成 ， 当 模型 顶点 细节 级 别 够 高 (例如 在 足够 高 精度 的 球体 





中 ) 时 ， 改 变 顶 点 高 度 的 方法 效果 很 好 。 但 是 ， 当 模型 的 顶点 数量 很 少 
〈 例 如 立方 体 的 角 ) 时 ， 演 染 对 象 的 表面 需要 依赖 于 光栅 器 中 的 顶点 插 
值 来 填充 细节 。 当 顶点 着 色 器 中 可 用 于 改变 高 度 的 顶点 很 少时 ， 许 多 像 
素 的 高 度 将 无 法 从 高 度 图 中 检索 ， 而 需要 由 插值 生成 ， 从 而 导致 表面 细 
节 较 差 。 当 然 ， 在 片段 着 色 器 中 是 不 可 能 进行 项 点 操作 的 ， 因 为 这 时 顶 
点 已 被 光栅 化 为 像素 位 置 。 





程序 10.4 展 示 了 一 个 将 顶点 “ 回 外 ”《 即 在 表面 法 同 量 的 方向 上 ) 移 
动 的 顶点 着 色 器 代码 。 它 通过 将 顶点 法 向 量 乘 以 从 高 度 图 检索 所 得 的 
值 ， 然 后 将 该 乘积 与 顶点 位 置 相 加 ， 以 “ 回 外 ”移动 项 点。 





程序 10.4 顶点 着 色 器 中 的 高 度 贴图 





#version 430 


layout (location=@) in vec3 vertPos; 
layout (location=1) in vec2 texCoord; 
layout (location=2) in vec3 vertNormal; 


out vec2 tc; 
uniform mat4 mv_matrix; 
uniform mat4 proj_matrix; 














layout (binding=@) uniform sampler2D t; // 用 于 纹理 








layout (binding=1) uniform sampler2D h; // 用 于 高 度 图 





void main(void) 

{ // “"p" 是 高 度 图 所 改变 的 顶点 位 置 
// 由 于 高 度 图 是 灰 度 图 ， 因 此 使 用 其 任何 颜色 分 量 
// 都 可 以 〈 我 们 使 用 "r" ) 。 除 以 5.6 用 来 调整 高 度 
vec4 p = vec4(vertPos,1.0) + vec4( (vertNormal * ((texture(h, texCoord). 

P/O) shore) 
tc = tex_coord; 
gl Position = proj_matrix * mv_matrix * p; 


} 



























































图 10.14〈 见 彩 插 ) 展示 了 通过 在 画图 程序 中 涂鸦 创建 的 简单 高 度 
Al EAD 。 高 度 图 图 像 中 还 绘制 了 一 个 白色 矩形。 绿色 版 本 的 高 度 
Al CAE BSA) 用 作 纹 理 。 使 用 程序 10.4 中 展示 的 着 色 器 将 高 度 图 应 用 于 
100x100 的 矩形 网 格 模型 时 ， 会 产生 类 似 “ 地 形 ” 的 感觉 (如 图 10.14 右 图 
所 示 ) 。 注 意 白 色 和 矩形 是 如 何 生成 右边 的 悬崖 的 。 

















图 10.14 地形， 在 顶点 着 色 器 中 进行 高 度 贴 图 











图 10.14 展 示 的 泻 染 结果 还 算 可 以 ， 因 为 模型 (网 格 和 球体 ) 有 中 
够 数量 的 顶点 来 对 高 度 贴图 值 进行 采样 。 也 就 是 说 ， 模 型 具有 大 量 的 顶 
点 ， 而 高 度 图 相对 粗糙 并 且 以 低 分 辩 率 充分 地 采样 。 然 而 ， 仔 细 观 察 仍 
然 会 发 现存 在 分 辨 率 伪 影 ， 例 如 沿 图 10.14 中 地 形 右 侧 凸 起 的 矩形 盒 
的 左下 边缘 。 同 起 的 矩形 盒子 两 侧 看 起 来 不 是 完美 矩形 ， 而 且 颜 色 有 浙 
变 效果 ， 其 原因 是 底层 网 格 100 像 素 x100 像 素 的 分 辨 率 无 法 与 高 度 图 中 
的 白色 和 矩形 完全 对 齐 ， 从 而 导致 纹理 的 光 棚 化 坐标 沿 侧 面 产 生 伪 影 。 




















当 尝 试 将 其 应 用 于 要 求 更 严 苛 的 高 度 贴图 时 ， 在 顶点 着 色 器 中 进行 





高 度 贴图 的 限制 会 进一步 暴露 。 考 虑 图 10.5 中 展示 的 月 球 图 像 。 法 线 贴 
图 在 捕获 图 像 细节 方面 表现 非常 出 色 《〈《 如 图 10.9 和 图 10.11 所 示 ) ， 而 且 
由 于 它 是 灰 度 图 ， 因 此 尝试 将 其 作为 蝇 度 图 应 用 似乎 很 自然 。 但 是 ， 基 
于 顶点 着 色 圳 的 高 度 贴图 会 无 法 胜任 这 个 任务 ， 因 为 顶点 着 色 吉 中 采样 
的 顶点 数 《 即 使 对 于 精度 =500 的 球体 ) 比 起 图 像 中 的 细节 级 别 ， 仍 然 太 
少 。 相 较 之 下 ， 法 线 贴 图 能 够 很 好 地 捕获 细节 ， 因 为 在 片段 着 色 器 中 对 
法 线 贴 图 的 采样 是 像素 级 的 。 








我 们 将 会 在 之 后 的 第 12 章 继续 学 习 高 度 图 ， 在 那里 我 们 会 了 解 使 用 
曲面 细 分 着 色 器 生成 大 量 顶 点 的 方法 。 


补充 说 明 


四 囊 贴 图 或 法 线 贴 图 的 一 个 基本 限制 是 ， 虽 然 它 们 能 够 在 泻 染 对 象 
的 内 部 提供 表面 细节 的 外 观 ， 但 是 物体 轮廓 《外 边界 ) 无 法 显示 这 些 细 
节 《〈 它 保持 平滑 ) 。 高 度 贴 图 在 用 于 实际 修改 顶点 位 置 时 修复 了 这 个 缺 
陷 ， 但 它 也 有 其 自身 的 局 限 性 。 正 如 我 们 将 在 本 书后 面 看 到 的 ， 有 时 可 
以 使 用 几何 着 色 吉 或 曲面 细 分 着 色 圳 来 增加 顶点 的 数量 ， 使 高 度 贴图 更 
加 实用 、 有 效 。 








我 们 冒昧 地 简化 了 一 些 止 凸 贴图 和 法 线 贴 图 计算 。 在 重要 应 用 中 可 
以 使 用 更 准确 和 /或 更 有 效 的 解决 方案 N14。 


习题 


10.1 使 用 程序 10.1 进 行 试验 ， 修 改 片 段 着 色 器 中 的 设置 和 /或 计算 
并 观察 结 








10.2 ”使 用 绘图 程序 生成 一 份 高 度 图 并 在 程序 10.4 中 使 用 它 。 答 试 
识别 由 于 顶点 着 色 器 无 法 充分 采样 高 度 图 而 缺少 细节 的 位 置 。 你 可 能 会 
发 现 使 用 高 度 图 图 像 文件 在 对 地 形 进行 纹理 化 时 也 很 有 用 ， 如 图 10.14 
Aras 《或 者 使 用 可 以 骏 露 表面 结构 的 图 案 ， 例 如 网 格 ) ， 这 样 你 就 可 以 
看 到 所 生成 地 形 中 的 山 和 谷 。 





10.3 CHH) 向 程序 10.4 中 添加 光照 ， 以 便 进 一 步 暴露 高 度 贴图 
地 形 的 表面 结构 。 





10.4 HWH) 为 练习 10.3 中 的 代码 添加 阴影 贴图 ， 从 而 使 蜗 度 贴 
图 地 形 投 财 阴影 。 
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[1] 这 里 使 用 了 高 度 贴图 说 法 ， 通 过 纹理 图 像 更 改 顶点 的 方法 一 般 称 六 
位 移 贴图 /置换 贴 几 。 高 度 图 除了 用 于 位 移 贴图 /置换 贴图 ， 有 时 也 用 于 
视差 贴图 ， 请 读者 阅读 时 注意 区 别 。 译 者 注 











第 11 章 ”参数 曲面 


在 20 世 纪 50 年 代 和 60 年 代 在 雷诺 公司 工作 期 间 ， 皮 埃 尔 : 贝 窄 尔 
(Pierre Bézier) 开发 了 用 于 设计 汽车 车 吴 的 软件 系统 。 他 的 程序 利用 
J Paul de Casteljau 之 前 开发 的 数学 方程 组 ， 后 者 曾 为 范 争 对 手 雪 铁 龙 汽 
车 制造 商 BE7?，DPC63] 械 作 。de Casteljau 方 程 仅 使 用 几 个 标量 参数 描述 曲 
线 ， 同 时 使 用 一 种 高 明 的 的 递归 算法 ， 称 为 “de Casteljjau 算 法 ”， 束 可 以 
生成 任意 精度 的 曲线 。 现 在 它们 分 别 被 称 为 " 贝 塞 尔 曲线 > 和”“ 贝 蹇 尔 曲 
面 ”， 这 些 方法 通常 用 于 高 效 地 对 各 种 曲面 3D 物 体 进 行 建 模 。 


11.1 二 次 贝 塞 尔 曲线 





二 次 贝 塞 尔 曲 线 由 一 组 参数 方程 定义 ， 方 程 组 中 使 用 3 个 控制 点 指 
定 特定 的 曲线 的 形状 ， 每 个 控制 点 都 是 2D 空 间 中 的 一 个 点 。 贡 考虑 图 
11.1 中 所 示 的 一 组 3 个 点 [po， P1’ Polo 





p1 

















图 11.1 NÆ HRKI A 








通过 引入 参数 我 们 可 以 构建 一 个 用 来 定义 曲线 的 参数 方程 组 。t 


表示 从 一 个 控制 点 到 另 一 控制 点 间 线 段 距离 的 分 数 。 对 于 在 线段 上 的 

点 ，t 的 值 在 [0...1] 的 范围 内 。 图 11.2 显 示 了 一 个 这 样 的 值 ， t= 0.75， 分 
别 应 用 于 连接 po-p1 和 pj-p; 的 线段 。 通 过 t 在 两 条 原始 线段 上 定义 了 两 个 
新 点 po1(t) 和 p12(t)。 我 们 对 连接 两 个 新 点 po1( 站 和 p15() 的 线段 重复 该 过 
程 ， 产 生 点 P(D， 其 中 治 线段 pot(D 和 Piz(D 在 != 0.75 得 到 点 P(t)。P(D) 是 最 
终 得 到 的 曲线 上 的 点 ， 因 此 用 大 写字 母 P 表 示 。 














图 11.2 ”参数 位 置 处 的 点 4= 0.75 





针对 各 种 t 值 收集 大 量 的 点 P(t)， 则 会 产生 一 条 曲线 ， 如 图 11.3 所 
ee a 























现在 可 以 导出 二 次 贝 堵 尔 曲线 的 分 析 定 义 。 首 先 ， 我 们 注意 到 连接 


两 个 点 py 和 pp 的 线段 py-pp 上 的 任意 点 p 可 以 用 参数 t 表 示 如 下 : 
p(t) = tpa + (1 —t)pp 


使 用 该 等 式 ， 我 们 解 出 点 pol 和 P12 (3 SATE pop Mp: -p EWJ A L) 如 
T: 


polt) = tp: + (1 — t)po 
p12(t) = tpe + (1 — t)pı 


同 理 ， 在 这 两 点 所 连接 的 线段 上 的 点 可 以 表示 为 : 
P(t) = tpyo(t) + (1 — t)po (t) 
#3 Rp Fllpy HE 43: 
P(t) = t[tpy + (1 — t)pı] + (1 — t)[tpı + (1 — t)po] 


分 解 并 重新 合并 各 项 可 得 : 


P(t) = (1 —#)?ppo + ( 2t* )P1 + tpo 
n 
P(t) = F iBi(t) 
) > 

其 中 

Bo(t) = (1 — t)? 

Bi(t) = —2t? + 2t 

Bot) = 


KE, RIDERE H A Ee Ze ES ER DUA RB 
通常 被 称 为 “混合 函数 ”〈 尽 管 名 称 “B” 实 际 上 源 自 Sergei Bernstein 





[BE16]， 他 首先 描述 了 这 个 多 项 式 族 ) 。 请 注意 ， 混 合 函 数 的 形式 都 是 
二 次 的 ， 这 就 是 为 什么 得 到 的 曲线 称 为 二 次 贝 赛 尔 曲线 。 


11.2 三 次 贝 塞 尔 曲线 
我 们 现在 将 曲线 模型 扩展 到 4 个 控制 点 ， 就 会 得 到 一 个 三 次 贝 塞 尔 


曲线 ， 如 图 11.4 所 示 。 与 二 次 曲线 相 比 ， 三 次 贝 塞 尔 曲 线 能 够 定义 的 形 
状 更 加 丰富 ， 而 二 次 曲线 仅 限 于 定义 止 形 。 














图 11.4 ”建立 一 个 三 次 贝 塞 尔 曲 线 


同 二 次 曲线 时 的 情形 ， 我 们 可 以 推导 出 三 次 贝 窄 尔 曲线 的 解析 定 


X: 
poi (t) = tpı + (1 — t)po 
pı2(t) = tp2 + (1 — t)pı 
P23 (t) = tp3 十 (1 a t) po 
; 12(t) + (1 — t)po (t) 


Poi—12(t) = tp 
ti 


p12_23(t) = tpz (t) + (1 — t)p12(t) 


曲线 上 的 点 则 是 : 


P(t) = tpyo- 93(t) + (1 — t)poi- 19 (t) 


使 用 p1，_23 和 po1_12 的 定义 葵 换 等 式 中 的 项 ， 再 合并 得 : 





P(t) = os piB;(t) 
其 中 : 
Bolt) = (1 — 8)’ 
Bi(t) = 38 — 6? + 3t 
Bo(t) = —38 + 3t 
B{t) = 
DUBE oR ZA, BY DEVE ANN. FEE, 
使 用 me tte, 7E0.0~1.070HA, TATE Zee. Plan, 





当 增 量 为 0.1 时 ， 我 们 可 以 使 用 t 值 为 0.0、0.1、0.2、0.3 等 的 循环 。 对 于 t 
的 每 个 值 ， 计 算 贝 塞 尔 曲 线 上 的 对 应 点 ， 并 绘制 连接 连续 点 的 一 系列 线 
段 ， 如 图 11.5 中 的 算法 所 述 


void drawBezierCurve (controlPointVector C) 
{ currentPoint =C[0]; / 曲线 从 第 一 个 控制 点 开始 
t = 0.0; 
while (t <= 1.0) 
{ ”WU 计算 混合 函数 在 t 时 对 控制 点 的 加 权 和 |， 
/作为 曲线 的 下 一 个 点 
nextPoint = (0,0) ; 
for (int i=0; i<=3; i++) 
nextPoint = nextPoint + (blending(i,t) * C[i]); 
drawLine (currentPoint,nextPoint); 
currentPoint = nextPoint; 
t =t + increment; 


bo 


double blending(int i, double t) 
{ switch (i) 

{ case 0: return ((1-t)*(1-t)*(1-t));  /(1-t)8 
case 1: return (3*t*(1-t)*(1-t)); 1 3t(1-)2 
case 2: return (3*t*t*(1-t)); // 3t2(1-t) 
case 3: return (t*t*t); lB 




















图 11.5” 演 染 贝 塞 尔 曲 线 的 迭代 算法 


另 一 种 方法 是 使 用 de Casteljau 算 法 递归 地 将 曲线 对 半 细 分 ， 其 中 ， 
在 每 个 递归 步骤 t= 1/2。 图 11.6 展 示 了 左 侧 曲线 细 分 后 的 新 三 次 控制 点 
(doo qe q h) ， 以 绿色 显示 〈 见 彩 搬 ) 。 该 算法 由 de Casteljau 提 
出 《完整 推导 见 [As14) 。 





P; 


q2 = (Do+p1)/4 + 
(Pp1+p2)/4 


q1= (potp1)/2 -一 







m m 
m” 


qo = Po 

















图 11.6” 细 分 三 次 贝 塞 尔 曲 线 


算法 见 图 11.7。 该 算法 重复 将 曲线 段 细 分 为 两 半 的 过 程 ， 直 到 每 个 
曲线 段 足够 直 ， 进 一 步 的 细 分 不 会 产生 实际 的 好 处 。 在 极限 情况 下 〔 随 
着 生成 的 控制 点 越 来 越 靠近 ) ， 曲 线段 本 身 实际 上 与 第 一 个 控制 点 和 最 
后 一 个 控制 点 (qo 和 qs) 之 间 的 线段 相同 。 因 此 ， 可 以 通过 比较 从 第 一 
控制 点 到 最 后 一 个 控制 点 的 距离 与 连接 4 个 控制 点 的 3 条 线段 的 长 度 之 和 
来 确定 曲线 段 是 否 “ 足 够 直 ”; 














Dı = |po — pı| + |pı — p2| + |p2 — ps| 
D? = |po — pal 


D,-Dy/)F—-T EB DBT, RE MNA EA T o 


de Casteljau 算 法 有 一 个 有 趣 的 特性 ， 它 可 以 在 不 使 用 之 前 描述 的 混 
合 函 数 的 情况 下 ， 生 成 曲线 上 所 有 的 点 。 同 时 请 注意 ，p(1/2) 处 的 中 心 
点 是 “共享 ”的 ， 即 它 既 是 左 细 分 中 最 右 的 控制 点 ， 也 是 右 细 分 中 最 左 的 
ie. 它 可 以 使 用 t= 1/2 处 的 混合 函数 或 使 用 由 de Casteljjau 导 出 的 公 
Alq + ri)/2 来 计算 。 








男 请 注意 ， 图 11.7 中 所 示 的 subdivide() 函 数 假定 传 入 的 参数 p、q 和 r 
是 “引用 ”参数 ， 因 此 ， 图 11.7 上 方 列 出 的 drawBezierCurve 函 数 对 于 
subdivide() 的 调用 ， 导 致 subdivide() 函 数 中 的 计算 修改 了 调用 中 所 传 的 实 
际 参数 。 


drawBezierCurve(ControlPointVector C) 
{ if(Cis “straight enough”) 
draw line from first to last control point 
else 
{ subdivide(C, LeftC, RightC) 
drawBezierCurve(LeftC) 
drawBezierCurve(RightC) 


} } 


subdivide(ControlPointVector p, q, r) 
{ / 计算 左 细 分 的 控制 点 
q(0) = p(0) 
q(1) = (p(0)+p(1)) / 2 
q(2) = (p(0)+p(1)) 1 4+ (p(1)+p(2)) I 4 
/ 计算 右 细 分 的 控制 点 
(1) = (p(1)+p(2)) 4+ (p(2)+p(3)) I 4 
r(2) = (p(2)+p(3)) / 2 
r(3) = p(3) 
// 4 t-0.5 时 ,计算 “共享 "控制 点 
q(3) = r(0) = (q(2)+r(1)) 12 








图 11.7 贝 塞 尔 曲线 的 递归 细 分 算法 














11.3 ”二 次 贝 塞 尔 曲面 





贝 塞 尔 曲线 定义 了 曲线 〈 在 2D 或 3D 空 间 中 ) ， 而 贝 塞 尔 曲面 定义 
了 3D 空 间 中 的 曲面 。 将 我 们 在 曲线 中 看 到 的 概念 扩展 到 曲面 ， 需 要 将 
参数 方程 组 中 的 参数 个 数 从 一 个 扩展 到 两 个 。 对 于 贝 塞 尔 曲线 ， 我 们 将 
参数 称 为 fk。 对 于 贝 塞 尔 曲 面 ， 我 们 将 参数 称 为 w 和 v。 曲 线 由 点 P(D 组 
成 ， 而 曲面 将 由 点 P(u, v) 组 成 ， 如 图 11.8 所 示 。 








图 11.8 BS h k 











对 于 二 次 贝 塞 尔 曲 面 ， 每 个 轴 u 和 v 上 有 3 个 控制 点 ， 总 共 9 个 控制 
点 。 图 11.9( 见 彩 插 ) 使 用 蓝 色 展示 了 一 组 共 9 个 控制 点 (通常 称 为 控 
制 点 < 网 格 >》 的 示例 ， 以 及 相应 的 曲面 (红色 》。 





图 11.9 二 次 贝 竖 尔 控制 网 格 和 相应 的 表面 


网 格 中 的 9 个 控制 点 标记 为 py， 其 中 ij 分 别 代表 u 和 v 方 网 上 的 之 
引 。 每 组 3 个 相 邻 控制 点 《例如 (Poo: Pow? Por ) 会 定义 一 条 贝 塞 尔 


曲线 。 然 后 将 表面 上 的 点 P(u， 妇 定义 为 两 个 混合 函数 的 和 ， 一 个 在 v 方 


问 ， 一 个 在 v 方 向 。 则 用 于 构建 贝 赛 尔 曲面 的 两 个 混合 函数 的 形式 遵循 
先前 为 贝 塞 尔 曲线 给 出 的 方法 : 





Bolu) 
By(u) 
Bə(u) 
Bo(v) 
) 
) 


LA = 
| 

= 

— 


p> 
N 


1 1 y i 1 I 


Bilv 
Bol U 
接 下 来 生成 构成 贝 塞 尔 曲面 的 点 P(u, v)o SPE MHI App H 
与 第 i 个 混合 函数 在 u 处 的 值 相 乘 ， 再 与 第 j 个 混合 函数 在 v 处 的 值 相 乘 。 
最 后 将 所 有 控制 点 的 结果 求 和 ， 后 成 贝 窟 尔 曲 面 上 的 点 PQu, v): 


(u. v oF eet u) * Biv) 


i=0 I= 0 
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人 感到 困惑 ， 我 们 稍 后 在 研究 曲面 细 分 着 色 器 时 会 看 到 《〈 对 于 实际 实现 
贝 窄 尔 曲面 非常 有 用 〉。 因 为 通常 控制 点 组 成 的 网 格 才 称 为 “ 秆 丁 ”。 





11.4 = I Æ h E 





从 二 次 曲面 到 三 次 曲面 需要 使 用 更 大 的 网 格 一 一 4x4 而 非 3x3。 图 
11.10 (WH) Shas T16 AR CE) 和 相应 曲面 (红色 ) 的 
示例 。 





图 11.10 “三 次 贝 塞 尔 控制 网 格 和 相应 的 曲面 
同上 ， 我 们 可 以 通过 组 合 三 次 贝 塞 尔 曲线 的 相关 混合 函数 来 推导 表 
EER RPU, v) 的 公式 : 


(u. v oy Ga u )* Bj(v) 


i=0 7=0 





其 中 : 
Bo(u) = (1 — u)’ Bo(v) = (1 — v)’ 
Bi(u) = —3u? — 6u? + 3u Biv = — 6v? + 3w 
Bo(u) = — 3u? + 3u? Bə(v) = u + 3w? 
B;(u) = u? B;(v) = v’ 
Ye Ge E OR Ht, BY LA a ASME, DEE HG 
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曲面 沿 每 个 维度 分 成 两 半 ， 如 图 11.11 所 示 。 每 个 细 分 产生 4 个 新 的 控制 
点 网 格 ， 每 个 网 格 包含 16 个 点 ， 这 些 点 定义 了 曲面 的 一 个 象限 。 


U High 
U High = 
"PEP 





图 11.11 贝 塞 尔 曲 面 的 递归 细 分 


当 演 染 贝 窄 尔 曲 线 时 ， 我 们 在 曲线 “足够 直 ” 时 停止 细 分 。 而 对 于 贝 
塞 尔 曲面 ， 我 们 在 曲面 “足够 平坦 ”时 停止 递归 。 一 种 实现 方法 是 ， 确 保 
子 象限 控制 网 格 上 所 有 递归 生成 的 点 ， 距 由 该 网 格 的 4 个 角 点 中 的 3 个 定 
义 的 平面 的 距离 ， 都 小 于 一 个 允许 的 范围 。 点 (Xsy,z) 与 平面 (4,B,C,D) 之 
间 的 距离 d 为 : 








At + By+Cz+D 
d = abs —— 
V A? + B24 C? 


OURAN FFT AE DBL, WRITE EE, HHE 
用 子 象限 网 格 的 4 个 角 的 控制 点 来 绘制 两 个 三 角形 。 


对 于 贝 塞 尔 曲 线 ，OpenGL 管 线 的 细 分 阶段 为 基于 图 11.5 中 的 迭代 
算法 演 染 贝 塞 尔 曲 面 提供 了 一 种 有 了 吸引 力 的 蔡 代 方法 。 其 集 略 是 让 曲面 
细 分 生成 一 个 大 的 顶点 网 格 ， 然 后 使 用 混合 函数 将 这 些 顶点 重新 定位 到 
贝 塞 尔 曲 面 上 ， 由 三 次 贝 塞 尔 控制 点 指定 。 我 们 在 第 12 章 中 实现 了 这 一 
le 








补充 说 明 


本 章 重 点 介绍 参数 贝 塞 尔 曲线 和 曲面 的 数学 基础 。 我 们 推迟 了 在 
OpenGL 中 呈现 其 中 任何 一 个 的 实现 ， 因 为 实现 它们 需要 适当 的 曲面 细 
分 着 色 器 知识 作为 载体 ， 我 们 将 在 下 一 章 中 进行 介绍 。 我 们 还 跳 过 了 一 
些 推导 过 程 ， 例 如 递归 细 分 算法 。 


在 3D 图 形 中 ， 使 用 贝 塞 尔 曲线 建 模 对 象 有 许多 优点 。 首 先 ， 理 论 
上 ， 这 些 物体 可 以 任意 缩放 ， 并 且 仍 然 保持 光滑 的 表面 而 不 “ 像 系 化 ”。 
其 次 ， 许 多 由 复杂 曲线 组 成 的 物体 可 以 使 用 贝 赛 尔 控制 点 集合 进行 更 有 
效 的 存储 ， 而 不 是 存储 数 千 个 顶点 。 











除 计 算 机 图 形 和 汽车 外 ， 贝 窄 尔 曲线 还 有 许多 实际 应 用 。 在 桥梁 设 
计 中 也 可 以 找到 它们 的 身影 ， 例 如 耶路撒冷 的 Chords Bridge I1, 38 
似 的 技术 也 用 于 构建 TrueType 字 体 ， 因 此 可 以 将 其 缩放 到 任意 大 小 ， 或 
者 将 视角 任意 拉 近 观看 ， 而 字体 边缘 始终 保持 平 请 。 


习题 


11.1 ZANR HAR BR FE SE ale a He. Faz 
(或 绘制 ) 一 个 曲线 作为 例子 ， 该 曲线 既 不 以 完全 四 的 形式 ， 也 不 以 完 
全 凸 的 方式 弯曲 ， 因 此 无 法 通过 二 次 贝 塞 尔 曲线 进行 近似 描述 。 


11.2 ”使 用 钢笔 或 铅笔 在 一 张 纸 上 绘制 一 组 任意 4 个 点 ， 按 任意 顺 
序 编号 为 1 一 4， 然 后 答 试 大 致 绘制 一 条 由 这 4 个 有 序 控制 点 定义 的 三 次 
贝 豆 尔 曲线 。 接 痢 重 新 排列 控制 点 的 编号 《改变 它们 的 顺序 ， 但 不 改变 
它们 的 位 置 ) 并 重新 绘制 新 产生 的 三 次 贝 塞 尔 曲线 。 互 联网 上 有 许多 在 
线 工 具 可 以 用 于 绘制 贝 竖 尔 曲线 ， 你 可 以 使 用 它们 来 检验 你 绘制 的 曲 
线 。 
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[1] 当然 ， 曲 线 可 以 存在 于 3D 空 间 中 。 然 而 ， 二 次 曲线 完全 位 于 2D 平 
面 内 。 


第 12 章 ”曲面 细 分 


术语 Tessellation (Het) 是 指 一 大 类 设计 活动 ， 通 和 是 指 在 平坦 的 
表面 上 ， 用 各 种 几何 形状 的 瓷砖 相 邻 排列 以 形成 图 案 。 它 的 目的 可 以 是 
艺术 性 的 或 实用 性 的 ， 很 多 例子 可 以 追溯 到 几 千 年 前 [TS16]。 


在 3D 图 形 学 中 ，Tessellation 指 的 是 有 点 不 同 的 东西 《曲面 细 分 ) ， 
但 显然 是 由 它 的 经 典 对 应 物 〈 镶 嵌 ) 启发 而 成 的 。 在 这 里 ， 曲 面 细 分 指 
的 是 生成 并 且 操 控 大 量 三 角形 以 泻 染 复 洒 的 形状 和 表面 ， 尤 其 是 使 用 硬 
件 进 行 演 染 。 曲 面 细 分 是 OpenGL 核 心 近 期 才 增 加 的 新 功能 ， 在 2010 年 
的 4.0 版 本 中 出 现 。 世 


12.1 OpenGEL 中 的 曲面 细 分 
OpenGL 对 硬件 曲面 细 分 的 支持 ， 通 过 3 个 管线 阶段 提供 : 
(1) 曲面 细 分 控制 着 色 器 ; 

(2) 曲面 细 分 器 ; 
(3) 曲面 细 分 评估 着 色 器 。 


第 (1) 和 第 (3) 阶段 是 可 编程 的 ， 而 中 间 的 第 《2) 阶段 不 是 。 
为 了 使 用 曲面 细 分， 程序 员 通 秆 会 提供 控制 着 色 需 和 评估 着 色 器 。 


曲面 细 分 器 《其 全 名 是 曲面 细 分 图 元 生成 器 ， 或 ITPG) 是 硬件 支持 
的 引擎 ， 可 以 生成 国定 的 三 角形 网 格 。 妆 控制 着 色 器 允许 我 们 配置 曲面 
细 分 器 要 构建 什么 样 的 三 角形 网 格 。 然 后 ， 评 估 着 色 器 允许 我 们 以 各 种 
方式 操控 网 格 。 然 后， 被 操控 过 的 三 角形 网 格 ， 会 作为 通过 管线 前 进 的 
顶点 的 源 数 据 。 回 想 一 下 图 2.2， 在 管线 上 ， 曲 面 细 分 着 色 器 位 于 顶点 
着 色 器 和 几何 着 色 器 阶段 之 间 。 





让 我 们 从 一 个 简单 的 应 用 程序 开始 ， 该 应 用 程序 只 使 用 曲面 细 分 器 
创建 项 点 的 三 角形 网 格 ， 然 后 在 不 进行 任何 操作 的 情况 下 显示 它 。 为 
此 ， 我 们 需要 以 下 模块 。 

(1) C++/OpenGL 应 用 程序 : 


创建 一 个 摄像 机 和 相关 的 MVP 算 了 泗 ， 视 图 Cv) 和 投影 (p) FE REHA 
ERAILL, EA Cm) 矩阵 可 用 于 修改 网 格 的 位 置 和 方 回 。 





(2) 顶点 着 色目: 

在 这 个 例子 中 基本 上 什么 都 不 做 ， 顶 点 将 在 曲面 细 分 器 中 生成 。 
(3) 曲面 细 分 控制 着 色 器 : 

指定 曲面 细 分 器 要 构建 的 网 格 。 

(4) 曲面 细 分 评估 着 色 器 : 


将 MVP 和 矩阵 应 用 于 网 格 中 的 顶点 。 


(5) 片段 着 色 器 : 

只 需 为 每 个 像素 输出 固定 颜色 。 

程序 12.1 显 示 了 整个 应 用 程序 的 代码 。 即 使 像 这 样 的 简单 示例 也 相 
当 复 杂 ， 因 此 许多 代码 元 素 都 需要 解释 。 请 注意 ， 这 是 我 们 第 一 次 使 用 
除 顶 点 和 片段 着 色 器 之 外 的 组 件 构 建 GLSL 泻 染 程 序 。 因 此 ， 我 们 实现 
了 createShaderProgram() 的 4 参数 重 载 版 本 。 











> 


旦 序 12.1 ”基本 曲面 细 分 器 网 格 




















C++ / 0penGL 应 用 程序 





GLuint createShaderProgram(const char *vp, const char *tCS, const char *tES 
,» const char *fp) { 

string vertShaderStr = readShaderSource(vp) ; 

string tcShaderStr = readShaderSource(tCs); 

string teShaderStr = readShaderSource(tES); 

string fragShaderStr = readShaderSource(fp) ; 


const char *vertShaderSrc = vertShaderStr.c_str(); 
const char *tcShaderSrc = tcShaderStr.c_str(); 
const char *teShaderSrc = teShaderStr.c_str(); 
const char *fragShaderSrc = fragShaderStr.c_str(); 


GLuint vShader = glCreateShader(GL_VERTEX_SHADER) ; 

GLuint tcShader = glCreateShader(GL_TESS CONTROL_SHADER) ; 
GLuint teShader = glCreateShader(GL_TESS_EVALUATION_SHADER) ; 
GLuint fShader = glCreateShader(GL_FRAGMENT_SHADER) ; 


glShaderSource(vShader, 1, &vertShaderSrc, NULL); 
glShaderSource(tcShader, 1, &tcShaderSrc, NULL); 
glShaderSource(teShader, 1, &teShaderSrc, NULL); 
glShaderSource(fShader, 1, &fragShaderSrc, NULL); 


glCompileShader(vShader) ; 
glCompileShader(tcShader) ; 
glCompileShader (teShader) ; 
glCompileShader(fShader) ; 


GLuint vtfprogram = glCreateProgram() ; 
glAttachShader(vtfprogram, vShader); 
glAttachShader(vtfprogram, tcShader) ; 
glAttachShader(vtfprogram, teShader) ; 
glAttachShader(vtfprogram, fShader); 
glLinkProgram(vtfprogram) ; 

return vtfprogram; 


void init(GLFWwindow* window) { 


renderingProgram = createShaderProgram("vertShader.gls1", 
"tessCShader.glsl", "“tessEShader.glsl1", "fragShader.glsl1"); 
} 


void display(GLFWwindow* window, double currentTime) { 
glUseProgram(renderingProgram); 


glPatchParameteri(GL_PATCH_VERTICES, 1); 
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); 
glDrawArrays(GL_PATCHES, ©, 1); 

} 


顶点 着 色 器 

#version 430 

uniform mat4 mvp_matrix; 
void main(void) { } 




















曲面 细 分 控制 着 色 器 
#version 430 

uniform mat4 mvp_matrix; 
layout (vertices = 1) out; 





= 








void main(void) 

{ gL_TessLevelouter[6] 
gl_TessLevelOuter[1] 
gl_TessLevelOuter[2] 
gl_TessLevelOuter[3] 
gl_TessLevelInner[@] 
gl_TessLevelInner[1] 


} 
曲面 细 分 评估 着 色 器 


#version 430 
uniform mat4 mvp_matrix; 
layout (quads, equal_spacing, ccw) in; 


IN 
ee 
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we Wwe 























void main (void) 
{ float u = gl_TessCoord.x; 
float v = gl_TessCoord.y; 
gl_ Position = mvp_matrix * vec4(u,@,v,1); 


} 
片段 着 色 器 


#version 430 
out vec4 color; 
uniform mat4 mvp_matrix; 





void main(void) 
{ color = vec4(1.0, 1.0, 0.0, 1.0); // 黄色 
} 





得 到 的 输出 网 格 如 图 12.1 所 示 〔〈 见 彩 插 ) 。 








图 12.1 Tessellator 三 角形 网 格 输出 








曲面 细 分 器 生成 由 两 个 参数 定义 的 顶点 网 格 : 内 层级 别 和 外 层级 
别 。 在 这 种 情况 下 ， 内 层级 别 为 12， 外 层级 别 为 6 一 网 格 的 外 边缘 被 
分 为 6 段 ， 而 跨越 内 部 的 线 被 分 为 12 段 。 





程序 12.1 中 的 特别 相关 的 新 结构 被 高 亮 显 示 。 让 我 们 首先 讨论 第 一 
部 分 一 一 C++/ OpenGL 代 码 。 


编译 这 两 个 新 着 色 器 ， 跟 顶点 和 片段 着 色 器 完全 相同 。 然 后 将 它们 


附加 到 同一 个 泻 染 程序 ， 并 且 链 接 调 用 保持 不 变 。 唯 一 的 新 项 目 是 用 于 
旨 定 要 实例 化 的 着 色 器 类 型 的 常量 一 一 新 常量 如 下 : 


GL_TESS EVALUATION SHADER 

请 注意 display0 函 数 中 的 新 项 目 。glDrawArrays0 调 用 现在 指定 
GL_PATCHES。 当 使 用 曲面 细 分 时 ， 从 C++/OpenGL 应 用 程序 发 送 到 管 
线 ( 即 在 VBO 中 ) 的 顶点 不 会 被 泻 染 ， 但 通常 会 被 当 作 控制 点 ， 就 像 我 
们 在 贝 塞 尔 曲 线 中 看 到 的 那些 一 样 。 一 组 控制 点 被 称 作 “补丁 >”， 并 且 在 
使 用 曲面 细 分 的 代码 段 中 ，GL_PATCHES 是 唯一 允许 的 图 元 类 型 Zh 
本 ”中 顶点 的 数量 在 glPatchParameteri0 的 调用 中 指定 。 在 这 个 特定 示例 
中 ， 没 有 任何 控制 点 被 发 送 ， 但 我 们 仍然 需要 指定 至 少 一 个 。 类 似 地 ， 
在 gjDrawArrays() 调 用 中 ， 我 们 指示 起 始 值 为 0， 顶 点 数量 为 1， 即 使 我 
们 实际 上 没有 从 C++ 程序 发 送 任何 顶点 。 





对 glPolygonMode0 的 调用 指定 了 如 何 光 顶 化 网 格 。 默 认 值 为 
GL_FILL。 而 我 们 的 代码 中 显示 的 是 GL_LINE， 如 我 们 在 图 12.1 中 看 到 
的 那样 ， 它 只 会 导致 连 接线 被 光栅 化 (因此 我 们 可 以 看 到 由 曲面 细 分 器 
生成 的 网 格 本 号) 。 如 果 我 们 将 该 行 代码 更 改 为 GL_FILL (或 将 其 注释 
掉 ， 从 而 使 用 默认 行为 GL_FILL)〉 ， 我 们 将 得 到 如 图 12.2 所 示 的 版 本 。 











图 12.2 ”使 用 GL_FILL 泻 染 的 细 分 网 格 





现在 让 我 们 来 过 一 裔 4 个 着 色 器 。 如 前 所 述 ， 顶 点 着 色 器 几乎 没 什 
么 可 做 的 ， 因 为 C++/OpenGL 应 用 程序 没有 提供 任何 项 点 。 它 包含 的 是 
一 个 统一 变量 声明 ， 以 和 其 他 着 色 器 相 匹 配 ， 以 及 一 个 空 的 main()。 在 
任何 情况 下 ， 所 有 着 色 器 程序 都 必须 包含 顶点 着 色 器 。 











曲面 细 分 控制 着 色 器 指定 曲面 细 分 器 要 生成 的 三 角形 网 格 的 拓扑 结 
构 。 通 过 将 值 分 配给 名 为 gL_TessLevelxxx 的 保留 字 ， 设 置 6 个 “级 别 ” 参 
数 一 一 两 个 “内 部 ”和 4 个 “外 部 ”级 别 。 我 们 这 里 细 分 了 一 个 由 三 角形 组 
成 的 大 矩形 网 格 ， 称 为 四 边 形 。 级 别 参数 告诉 曲面 细 分 器 在 形成 三 角 
形 时 如 何 细 分 网 格 ， 它 们 的 排列 如 图 12.3 所 示 。 





环 一 一 ”外 部 级 别 3 一 一 > 


Py 
< gyo 


< 一 一 外 部 级 别 0 一 一 > 





< 一 一 ”外 部 级 别 2 ”一 > 


< 一 一 外 部 级 别 1 一 一 > 





图 12.3” 细 分 级 别 


请 注意 控制 着 色 器 中 的 代码 行 : 


layout (vertices=1) out; 


这 与 之 前 的 GL_PATCHES 讨 论 有 关 ， 用 来 指定 从 顶点 着 色 器 传递 
给 控制 着 色 器 〈 以 及 “输出 ?给 评估 着 色 器 ) 的 每 个 “补丁 ”的 顶点 数 。 在 
我 们 现在 这 个 程序 中 没有 任何 顶点 ， 但 我 们 仍然 必须 指定 至 少 一 个 ， 因 
为 它 也 会 影响 控制 着 色 器 被 执行 的 次 数 。 稍 后 这 个 值 将 反映 控制 点 的 数 
量 ， 并 且 必 须 与 C++/OpenGL 应 用 程序 中 glPatchParameteri() 调 用 中 的 值 
匹配 。 











接 下 来 让 我 们 看 一 下 曲面 细 分 评估 着 色 器 。 它 以 一 行 代 码 开 头 ， 形 
如 : 


layout (quads, equal spacing, ccw) in; 


乍 一 看 这 好 像 与 控件 着 色 器 中 的 “out" 布 局 语句 有 关 ， 但 实际 上 它们 
征 无 天 的 。 相 反 ， 这 行 代 码 是 我 们 指示 曲面 细 分 器 去 生成 排列 在 一 个 大 
EW CMA) 中 顶点 的 位 置 。 它 还 指定 了 细 分 线段 〈 包 括 内 部 和 外 
部 ) 具有 相等 的 长 度 〈 稍 后 我 们 将 看 到 长 度 不 等 的 细 分 的 应 用 场 
Bt) 。“ccw” 参 数 指定 生成 曲面 细 分 网 格 顶 点 的 缠绕 顺序 在 当前 情况 
下 ;5 是 闻 时 名》 





然后 ， 由 曲面 细 分 器 生成 的 项 点 被 发 送 到 评估 着 色 器 。 因 此 ， 评 估 
着 色 器 既 可 以 从 控制 着 色 器 (通常 作为 控制 点 ) ， 又 可 以 从 曲面 细 分 器 
(曲面 细 分 网 格 》 接 收 项 点 。 在 程序 12.1 中 ， 仪 从 曲面 细 分 器 接收 项 
Fao 


评估 着 色 器 对 曲面 细 分 器 生成 的 每 个 顶点 执行 一 次 。 可 以 使 用 内 置 
变量 gl]_TessCoord 访 问 顶 点 位 置 。 曲 面 细 分 网 格 的 朝 同 使 得 它 位 于 X-Z 平 
面 中 ， 因 此 glL_TessCoord 的 X 和 Y 分 量 被 应 用 于 网 格 的 X 和 2 坐标 。 网 格 坐 
标 ， 以 及 gL_TessCoord 的 值 ， 范 围 为 0.0 一 1.0《〈 这 在 计算 纹理 坐标 时 会 很 
方便 ) 。 然 后 ， 评 估 着 色 器 使 用 MVP 和 矩阵 定向 每 个 顶点 〈 这 在 前 面 章节 
的 示例 中 ， 是 由 顶点 着 色 器 完成 的 ) 。 











最 后 ， 片 段 着 色 需 只 为 每 个 像 系 输出 一 个 恒定 的 黄色 。 当 然 ， 我 们 
也 可 以 使 用 它 来 为 我 们 的 场景 应 用 纹理 或 光照 ， 就 像 我 们 在 前 面 的 章节 
中 看 到 的 那样 。 





12.2” 贝 塞 尔 曲面 细 分 


现在 让 我 们 扩展 我 们 的 程序 ， 使 它 将 我 们 简单 的 官 形 网 格 转换 为 由 
塞 尔 曲面 。 细 分 网 格 应 该 为 我 们 提供 了 足够 的 顶点 来 对 曲面 进行 采样 
《如果 我 们 想 要 更 多 的 话 ， 我 们 可 以 增加 内 部 /外 部 细 分 级 别 )。 我 们 
现在 需要 的 是 通过 管线 发 送 控制 点 ， 然 后 使 用 这 些 控制 点 执行 计算 以 将 
细 分 网 格 转 换 为 我 们 所 需 的 贝 塞 尔 曲面 。 








假设 我 们 希望 建立 一 个 立方 体 贝 塞 尔 曲 面 ， 我 们 将 需要 16 个 控制 
点 。 我 们 可 以 通过 VBO 从 C++ 端 发 送 它们 ， 或 者 我 们 可 以 在 顶点 着 色 器 
中 硬 编 码 写 死 它们 。 图 12.4 概 述 了 来 自 C++ 端 的 控制 点 的 过 程 。 








C++/OpenGL 代码 


控制 点 、 纹 理 等 等 
顶点 着 色 器 
细 分 级 别 


se 
曲面 细 分 评估 着 色 器 
Wwe 
细 分 顶点 位 置 


=a 


图 12.4 ” 贝 塞 尔 曲 面 的 曲面 细 分 概述 





















现在 是 更 准确 地 解释 曲面 细 分 控制 着 色 器 CTCS) 如何 工 作 的 好 时 
机 。 与 顶点 着 色 器 类 似 ，TCS 对 每 个 传 入 顶点 执行 一 次 。 男 外 ， 回 想 一 
下 第 2 章 ，OpenGL 提 供 了 一 个 名 为 gL_VertexID 的 内 置 变量 ， 它 保存 一 个 
计数 器 ， 指 示 顶 点 着 色 器 当前 正在 执行 哪 次 调用 。 曲 面 细 分 控制 着 色 器 
中 存在 一 个 类 似 的 内 置 变量 gL_InvocationID 。 





曲面 细 分 的 一 个 强大 功能 是 TCS (以 及 TES) 着 色 器 可 以 同时 访问 
数组 中 的 所 有 控制 点 项 点。 首先 ， 当 每 个 调用 都 可 以 访问 所 有 顶点 时 ， 
TCS 对 每 个 顶点 执行 一 次 可 能 会 让 人 感到 困惑 。 在 每 个 TCS 调 用 中 ， 元 
余地 在 赋值 语句 中 指定 曲面 细 分 级 别 也 是 违反 直觉 的 。 尽 管 所 有 这 些 看 
起 来 都 很 奇怪 ， 但 这 样 做 是 因为 曲面 细 分 的 架构 设计 使 得 TCS 调 用 可 以 
并 行 运行 。 


OpenGL 提 供 了 几 个 用 于 TCS 和 TES 着 色 器 的 内 置 变量 。 我 们 已 经 提 


到 过 的 是 gL_InvocationID ， 当 然 还 有 glL_TessLevelInner 和 
g&L_TessLevelOuter。 以 下 是 一 些 最 有 用 的 内 置 变量 的 更 多 细节 和 摘 述 。 


曲面 细 分 控制 着 色 器 (TCS) 内 置 变量 。 


glin[] 含 每 个 传 入 的 控制 点 顶点 的 数组 一 一 每 个 传 入 顶点 是 
一 个 数组 元 素 。 可 以 使 用 “.” 表 示 法 将 特定 顶点 属性 作为 字段 进行 访 
问 。 一 个 内 置 属性 是 g]_Position 一 一 因此 ， 输 入 顶点 “ij” 的 位 置 可 以 
通过 gl]_in[i].gl_Position 访 问 。 

到 _out[ ] 一 一 用 于 将 输出 控制 点 的 顶点 发 送 到 TES 的 一 个 数组 一 一 
每 个 输出 顶点 是 一 个 数组 元 素 。 可 以 使 用 “.” 表 示 法 将 特定 顶点 属性 
作为 字段 进行 访问 。 一 个 内 置 属性 是 gl_Position 一 因此， 输出 顶 
点 “i? 的 位 置 可 以 通过 g]_out[i].gl_Position 访 问 。 

妃 _InvocationID 一 一 整 型 ID 计 数 器 ， 指 示 TCS 当 前 正在 执行 哪个 调 
用 。 一 个 第 见 的 用 途 是 用 于 传递 项 点 属性 ; 例如， 将 当前 调用 的 顶 
点 位 置 从 TCS 传 递 到 TES 可 以 用 如 下 方式 完成 : 
gl_out[lgl_InvocationID].gl_Position = 














gl_in[gl_InvocationID].gl_ Position. 


曲面 细 分 评估 着 色 器 〈TES) 内 置 变量 。 





gl inf ] 一 一 包含 每 个 传 入 的 控制 点 顶点 的 数组 一 一 每 个 传 入 顶点 是 
一 个 数组 元 素 。 可 以 使 用 “.” 表 示 法 将 特定 顶点 属性 作为 字段 进行 访 
问 。 一 个 内 置 属性 是 g]_Position 一 一 因此 ， 输 入 顶点 “i 的 位 置 可 以 
通过 gl]_in[i].gl_Position 访 问 。 

gl_Position 曲面 细 分 网 格 顶 点 的 输出 位 置 ， 可 能 在 TES 中 被 修 
改 。 重 要 的 是 要 注意 gl_Position 和 gl_in[xxx].gl_Position 是 不 同 的 
一 一 gl]_Position 是 起 源 于 曲面 细 分 器 的 输出 顶点 的 位 置 ， 而 











g&L_in[xxx].gl]_Position 是 一 个 从 TCS 进 入 TES 的 控制 点 顶点 位 置 。 








值得 注意 的 是 ，TCS 中 的 输入 和 输出 控制 点 顶点 属性 是 数组 。 不 同 
的 是 ，TES 中 的 输入 控制 点 顶点 和 顶点 属性 是 数组 ， 但 输出 顶点 是 标 
量 。 此 外 ， 很 容易 混 消 哪 些 项 点 来 目 于 控制 点 ， 哪 些 顶点 是 细 分 建立 
的 ， 然 后 移动 以 形成 结果 曲面 。 总 而 言 之 ，TCS 的 所 有 顶点 输入 和 输出 
都 是 控制 点 ， 而 在 TES 中 ，glL_in[ ] 保 存 输入 控制 点 ，gL_TessCoord 保 存 
输入 的 细 分 网 格 点 ，gL_Position 保 存 用 于 泻 染 的 输出 表面 顶点 。 





我 们 的 曲面 细 分 控制 着 色 器 现在 有 两 个 任务 : 指定 曲面 细 分 级 别 并 
将 控制 点 从 顶点 着 色 器 传递 到 评估 着 色 器 。 然 后 ， 评 估 着 色 器 可 以 根据 
贝 塞 尔 控制 点 修改 网 格 点 (gl_TessCoords〉 的 位 置 。 








程序 12.2 显 示 了 所 有 4 个 着 色 器 一 一 顶点 、TCS、TES 和 片段 一 一 用 
于 指定 控制 点 补丁 ， 生 成 平坦 的 曲面 细 分 顶点 网 格 ， 在 控制 点 指定 的 曲 
面 上 重新 定位 这 些 顶 点 ， 并 使 用 纹理 图 像 绘制 生成 的 曲面 。 它 还 显示 了 
C++/OpenGL 应 用 程序 的 相关 部 分 ， 特 别 是 在 display0 函 数 中 。 在 此 示例 
中 ， 控 制 点 源 自 顶 点 着 色 器 (它们 在 那里 硬 编码 写 死 ) ， 而 不 是 从 
C++/OpenGL 应 用 程序 进入 OpenGL 管 线 。 代 码 后 面 会 讲述 其 他 详细 信 
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程序 12.2” 贝 赛 尔 曲面 的 曲面 细 分 

















顶点 着 色 器 





#version 430 

out vec2 texCoord; 

uniform mat4 mvp_matrix; 

layout (binding = 6) uniform sampler2D tex_color; 


void main(void) 
{ // 这 次 由 顶点 着 色 器 指定 和 发 送 控制 点 
const vec4 vertices[ ] = 
vec4[ ] (vec4(-1.0, 0.5, -1.0, 1.0), vec4(-0.5, @.5, -1.0, 1.0), 
vec4( @.5, 0.5, -1.0, 1.0), vec4( 1.0, @.5, -1.0, 1.0), 











vec4(-1.0, 0.0, -@.5, 1.0), vec4(-@.5, 0.0, -@.5, 1.0), 
vec4( @.5, 0.0, -@.5, 1.0), vec4( 1.0, 0.0, -@.5, 1.0), 
vec4(-1.0, 0.0, @.5, 1.0), vec4(-0.5, 0.0, 0.5, 1.0), 
vec4( @.5, 0.0, @.5, 1.0), vec4( 1.0, 0.0, 0.5, 1.0), 


vec4(-1.0, -@.5, 1.0, 1.0), vec4(-@.5, 0.3, 1.0, 1.0), 
vec4( @.5, @.3, 1.0, 1.0), vec4( 1.0, 0.3, 1.0, 1.0) ); 














// 为 当前 顶点 计算 合适 的 纹理 坐标 ， 从 [ -1.. .+1] 转 换 到 [8...1] 

texCoord = vec2((vertices[gl_ VertexID].x + 1.0) / 2.0, (vertices[gl Vert 
exID].z + 1.0) / 2.0); 

gl_ Position = vertices[gl_ VertexID]; 


} 
曲面 细 分 控制 着 色 器 


#version 430 

in vec2 texCoord[ ]; 

out vec2 texCoord_TCSout[ ]; // 以 标量 形式 从 顶点 着 色 器 传 来 的 纹理 坐标 输出 ， 以 
数组 形式 被 接收 ， 然 后 被 发 送 给 评估 着 色 器 

















— 



































uniform mat4 mvp_matrix; 
layout (binding = 6) uniform sampler2D tex_color; 
layout (vertices = 16) out; // 每 个 补丁 有 16 个 控制 点 








void main(void) 
{ int TL = 32; // 曲面 细 分 级 别 都 被 设置 为 这 个 值 
if (gl_InvocationID == @) 
{ gl_TessLevelOuter[@] = TL; gl_TessLevelOuter[2] = TL; 
gl_TessLevelOuter[1] = TL; gl_TessLevelOuter[3] = TL; 
gl_TessLevelInner[@] = TL; gl_TessLevelInner[1] = TL; 
































} 

// 将 纹理 和 控制 点 传递 给 TES 

texCoord_TCSout[gl_InvocationID] = texCoord[gl InvocationID]; 

gl_out[gl_ InvocationID].gl Position = gl_in[gl_ InvocationID].gl_ Position 











3 


} 
曲面 细 分 评估 着 色 器 


#version 430 























layout (quads, equal_spacing,ccw) in; 
uniform mat4 mvp_matrix; 

layout (binding = 6) uniform sampler2D tex_color; 
in vec2 texCoord_TCSout[ ]; 
out vec2 texCoord_TESout; 


LH 
uy 





void main (void) 


{ vec3 
vec3 
vec3 
vec3 
vec3 
vec3 
vec3 
vec3 
vec3 
vec3 
vec3 
vec3 
vec3 
vec3 
vec3 
vec3 


float 
float 


poe 
p10 
p20 
p30 
pe1 
p11 
p21 
p31 
pe2 
p12 
p22 
p32 
p83 
p13 
p23 
p33 


U 
V 


(gL_in[6] 
(gl_in[1] 
(gl_in[2] 
(gl_in[3] 
(gl_in[4] 
(gl_in[5] 
(gl_in[6] 
(gl_in[7] 
(gl_in[8] 
(gl_in[9] 


.gl_Position) 
.gl_Position) 
.gl_Position) 
.gl_Position) 
.gl_Position) 
.gl_Position) 
.gl_Position) 
.gl_Position) 
.gl_Position) 
.gl_Position) 


(gl_in[10].gl_ Position) 
(gl_in[11].gl_ Position) 
(gl_in[12].gl_ Position) 
(gl_in[13].gl_ Position) 
(gl_in[14].gl_ Position) 
(gl_in[15].gl_ Position) 


gl_TessCoord.x; 
gl_TessCoord.y; 





// 立方 贝 塞 尔 基础 函数 


float 
float 
float 
float 
float 
float 
float 
float 


bu 


bu 
bu 
bu 


bv@ 


bv 
bv 
bv 


1 
2 
3 


1 
2 
3 


(1.0-u) 
3.0 * u 
3.0 * u 
Ue 
(1.0-v) 
3.0 * v 
3.0 * v 
VE Vs 


* 
* 
* 
u 
* 
* 
* 


(1.0-u) * (1 
(1.0-u) * (1 
u * (1.0-u); 
(1.0-v) * (1 
(1.0-v) * (1 
v * (1.0-v); 


V5 





// 输出 曲面 细 分 补丁 中 的 顶点 位 置 


vec3 outputPosition 


b 
+ b 
+ b 
+ b 


u@ 
ul 
u2 
u3 


* 
* 
* 
* 





( bv@*pee + bv1*pe1 + 
( bv@*p10 + bv1*p11 + bv 
( bv@*p20 + bvi*p21 + 


bv 


bv 


( bv@*p30 + bv1*p31 + bv 


gl Position 


// 输 


出 插值 过 的 纹理 














// 以 标量 形式 传 来 的 纹理 坐标 数组 被 一 个 个 传 


.XYZ; 
xyz; 
.XYZ; 
.XYZ; 
xyz; 
.XYZ; 
.XYZ; 
.XYZ; 
.XYZ; 
.XYZ; 


.XYZ; 
-XYZ} 
.XYZ; 
.XYZ; 
.XYZ; 
.XYyZ; 


.0-u); 
.0-u); 


.0-v); 
.0-v); 


2*pe2 
2*p12 
2*p22 
2*p32 


+ 
+ 
+ 


+ 








// (1-u)43 
// 3u(1-u)%2 
// 3u%2(1-u) 
// U^3 

// (1-v)43 
// 3v(1-v)%2 
// 3v42(1-v) 
// V^3 


bv3*pe3 ) 
bv3*p13 ) 
bv3*p23 ) 
bv3*p33 ); 


= mvp_matrix * vec4(outputPosition,1.0Ff); 

















坐标 


vec2 tc1 = mix(texCoord_TCSout[@], texCoord_TCSout[3], gl_TessCoord.x) ; 
vec2 tc2 = mix(texCoord_TCSout[12], texCoord_TCSout[15], gl_TessCoord.x) 


vec2 tc = mix(tc2, tc1, gl_TessCoord.y); 
texCoord TESout = tc; 


} 
片段 着 色 器 


#version 430 

in vec2 texCoord_TESout; 

out vec4 color; 

uniform mat4 mvp_matrix; 

layout (binding = 6) uniform sampler2D tex_color; 





void main(void) 
{ color = texture(tex_color, texCoord_TESout) ; 


} 




















C++/OpenGL 应 用 程序 
// 这 次 我 们 也 传 入 一 个 纹理 以 用 来 绘制 表面 
// 像 往常 一 样 在 init() 里 加 载 纹理 ， 并 在 display() 里 启用 

































































void display(GLFWwindow* window, double currentTime) { 


glActiveTexture(GL TEXTUREQ); 
glBindTexture(GL TEXTURE 2D, textureID); 


glFrontFace(GL_CCW); 

















glPatchParameteri(GL_PATCH_VERTICES, 16); // 每 个 补丁 的 顶点 数量 = 
16 

glPolygonMode(GL_FRONT_AND_ BACK, GL_FILL); 

glDrawArrays(GL_PATCHES, ©, 16); // 补丁 顶点 的 总 数量 : 16 
x 1 个 补丁 = 16 


} 








顶点 着 色 嚣 现在 指定 代表 特定 贝 塞 尔 曲 面 的 16 个 控制 点 (“补丁 ” 顶 
点 ) 。 在 这 个 例子 中 ， 它 们 都 被 归 一 化 到 范围 [-1...+1]。 顶 点 着 色 器 还 
使 用 控制 点 来 确定 适合 细 分 网 格 的 纹理 坐标 ， 其 值 在 [0...1] 范 围 内 。 很 
重要 的 是 ， 要 重申 顶点 着 色 器 输出 的 顶点 不 是 将 要 用 来 光栅 化 的 顶点 ， 
而 是 贝 塞 尔 控制 点 。 使 用 曲面 细 分 时 ， 补 丁 顶点 永远 不 会 被 光栅 化 一 一 











只 有 曲面 细 分 顶点 会 被 光栅 化 。 


控制 着 色 器 仍然 会 指定 内 部 和 外 部 曲面 细 分 级 别 。 它 现在 还 负责 将 
控制 点 和 纹理 坐标 发 送 到 评估 着 色 器 。 请 注意 ， 曲 面 细 分 级 别 只 需要 指 
定 一 次 ， 因 此 该 步骤 仅 在 第 0 次 调用 期 间 完 成 “回想 一 下 TCS 每 个 顶点 
运行 一 次 ， 因 此 在 此 示例 中 有 16 次 调用 ) 。 为 方便 起 见 ， 我 们 为 每 个 细 
分 级 别 指定 了 32 个 细 分 。 








接 下 来 ， 评 估 着 色 器 执行 所 有 贝 塞 尔 曲面 计算 。main(0 开 头 的 大 块 
赋值 语句 从 每 个 传 入 gl_in 的 gl_Position 中 提取 控制 点 (请 注意 ， 这 些 控 
制 点 对 应 于 控制 着 色 器 的 g]_out 变 量 ) 。 然 后 使 用 来 自 曲面 细 分 器 的 网 
格 点 计算 混合 函数 的 权重 ， 从 而 生成 一 个 新 的 outputPosition， 然 后 应 用 
模型 -视图 -投影 矩阵 ， 为 每 个 网 格 点 生成 输出 gL_Position 并 形成 贝 塞 尔 
曲面 。 





另外 ， 还 需要 创建 纹理 坐标 。 顶 点 着 色 器 仅 为 每 个 控制 点 位 置 提供 
一 个 纹理 坐标 。 但 我 们 并 不 是 要 泻 染 控制 点 ， 我 们 最 终 需 要 更 多 的 曲面 
细 分 网 格 点 的 纹理 坐标 。 有 很 多 方法 可 以 做 到 这 一 点 ， 在 这 里 我 们 利用 
GLSL 方 便 的 混合 功能 对 它们 进行 线性 插值 。mix0) 函 数 需 要 3 个 参数 : 
Ca) 起 始点 ; (b) 结束 点 ; 《c) 内 插值 ， 范 围 为 0~~1。 它 返回 与 内 
插值 对 应 的 起 点 和 终点 之 间 的 值 。 由 于 细 分 网 格 坐标 的 范围 也 是 0 一 1， 
所 以 它们 可 以 直接 用 于 此 目的 。 





这 次 在 片段 着 色 器 中 ， 不 再 是 输出 单一 颜色 ， 而 是 应 用 标准 纹理 。 
属性 texCoord_TESout 中 的 纹理 坐标 是 在 评估 着 色 器 中 生成 的 纹理 化 








标 。 对 C++ 程序 的 更 改 同 样 很 简单 一 一 请 注意 ， 现 在 指定 的 补丁 大 小 为 
16。 结 果 输 出 如 图 12.5 所 示 (应 用 了 [5V16] 的 平 铺 纹理 ) 。 














图 12.5 ”曲面 细 分 过 的 贝 塞 尔 曲面 























12.3 thie. MEA 





回想 一 下 ， 在 项 点 着 色 器 中 执行 高 度 贴 图 可 能 会 过 到 顶点 数量 不 足 
以 用 来 泻 染 所 需 的 细节 的 情况 。 现 在 我 们 有 了 生成 大 量 顶点 的 方法 ， 让 
我 们 回 到 Hastings-Trew 的 月 球 表 面 纹理 贴图 昌 T16l 并 将 其 用 作 高 度 贴图 ， 
提升 曲面 细 分 顶点 来 生成 月 球 表面 细节 。 正 如 我 们 将 看 到 的 ， 这 具有 一 
些 优点 ， 可 以 让 顶点 的 几何 形状 更 好 地 匹配 月 亮 图 像 ， 并 且 提 升 轮 廊 
(边缘 ) 细节 。 


我 们 的 策略 是 修改 程序 12.1， 在 X-Z 平 面 中 放置 细 分 网 格 ， 并 使 用 
高 度 贴 图 来 设置 每 个 细 分 网 格 点 的 7 坐标 。 要 做 到 这 一 点 ， 我 们 不 需要 
补丁 ， 因 为 可 以 硬 编码 细 分 网 格 的 位 置 ， 因 此 我 们 将 在 glDrawArrays0) 
和 glPatchParameteri() 中 为 每 个 补丁 指定 所 需 的 最 少 的 1 个 项 点， 如 程序 
12.1 中 所 做 的 那样 。Hastings-Trew 的 月 亮 纹理 图 像 既 用 于 颜色 ， 也 用 作 





HEISE 


我 们 通过 将 曲面 细 分 网 格 的 gL_TessCoord 值 映射 到 顶点 和 纹理 的 适 
当 范 围 ， 在 评估 着 色 器 中 生成 顶点 和 纹理 坐标 。 欠 评估 着 色 器 也 通过 添 
加 月 亮 纹 理 的 一 小 部 分 颜色 分 量 到 输出 顶点 的 Y 分 量 ， 来 实现 高 度 贴 
图 。 着 色 器 的 更 改 显 示 在 程序 12.3 中 。 











a 





Im. 








单 的 地 形 曲面 细 分 








程序 12.3 














顶点 着 色 器 





#version 430 

uniform mat4 mvp_matrix; 

layout (binding = 6) uniform sampler2D tex_color; 
void main(void) { } 


曲面 细 分 控制 着 色 器 




















layout (vertices = 1) out; // 这 个 应 用 程序 中 不 需要 控制 点 





void main(void) 


{ int TL=32; 
if (gl_InvocationID == @) 
{ gl_TessLevelOuter[@] = TL; gl _TessLevelOuter[2] = TL; 
gl_TessLevelOuter[1] = TL; gl_TessLevelOuter[3] = TL; 
gl_TessLevelInner[@] = TL; gl_TessLevelInner[1] = TL; 


} 
} 


曲面 细 分 评估 着 色 器 




















out vec2 tes_out; 
uniform mat4 mvp_matrix; 
layout (binding = 6) uniform sampler2D tex_color; 


void main (void) 
{ // 将 曲面 细 分 网 格 顶点 从 [8.. .1] 映 射 到 想 要 的 顶点 [-8.5...+6.5] 

vec4 tessellatedPoint = vec4(gl_ TessCoord.x - 6.5, 6.606, gl TessCoord.y - 
So ONE 












































// 垂直 “翻转 ”Y 值 ， 以 将 曲面 细 分 网 格 顶点 映射 到 纹理 坐标 












































// 左上 顶点 坐标 是 (8,86)， 左 下 纹理 坐标 是 (8,6) 
vec2 tc = vec2(gl_TessCoord.x, 1.0 - gl_TessCoord.y); 























// 图 像 是 灰 度 图 ， 所 以 任何 一 个 颜色 分 量 (CR. GRB) 都 可 以 作为 高 度 偏 移 量 
tessellatedPoint.y += (texture(tex_color, tc).r) / 40.0; // 将 颜色 值 
等 比例 缩小 应 用 于 Y 值 








// 将 高 度 贴 图 提升 的 点 转换 到 视觉 空间 
gl Position = mvp_matrix * tessellatedPoint; 
tes out = tc; 


} 
片段 着 色 器 








in vec2 tes_out; 
out vec4 color; 
layout (binding = 6) uniform sampler2D tex_color; 


void main(void) 
{ color = texture(tex_color, tes_out); 


} 





这 里 的 片段 着 色 器 类 似 于 程序 12.2 的 ， 只 是 根据 纹理 图 像 输出 颜 
色 。C++/OpenGL 应 用 程序 基本 上 没有 变化 一 一 它 加 载 纹理 (用 作 纹 理 
和 高 度 图 ) 并 为 其 启用 采样 器 。 图 12.6 显 示 了 纹理 图 像 ( 左 侧 ) 和 第 一 
次 尝试 的 最 终 输出 ， 遗 憾 的 是 ， 它 还 没有 实现 正确 的 高 度 贴图 。 








第 一 次 结果 存在 严重 缺陷 。 虽 然 我 们 现在 可 以 看 到 远 处 地 平 线 上 的 
轮廓 细 市 ， 但 是 那里 的 凸 起 与 纹理 贴图 中 的 实际 细 市 不 对 应 。 回 想 一 
F. RRA, AEWA”, MR EMAAR”. Balle 
像 右上 方 的 区 域 显示 的 大 山 丘 与 其 中 的 浅 色 和 深 色 无 关 。 





导致 此 问题 的 原因 是 细 分 网 格 的 分 辨 率 。 曲 面 细 分 器 可 以 生成 的 最 
大 顶点 数 取决 于 硬件 。 要 符合 OpenGL 标 准 ， 唯 一 的 要 求 是 每 个 曲面 细 
分 级 别 的 最 大 值 至 少 为 64。 我 们 的 程序 指定 了 一 个 内 部 和 外 部 曲面 细 分 


级 别 均 为 32 的 单一 细 分 网 格 ， 因 此 我 们 生成 了 大 约 32x32 或 者 说 刚刚 超 
过 1 000 个 顶点 ， 这 不 足以 准确 反映 图 像 中 的 细节 。 这 在 图 12.6 右 上 方 

《图 中 放大 ) 尤其 明显 一 一 边缘 细节 仅 在 沿 地 平 线 的 32 个 点 处 采样 ， 这 
会 产生 巨大 而 看 起 来 很 随机 的 山 丘 。 即 使 我 们 将 曲面 细 分 值 增加 到 64， 

总 共 64x64 或 刚刚 超过 4 000 个 顶点 仍然 不 足以 满足 使 用 月 球 图 像 进 行 高 
度 贴 图 的 需要 。 











图 12.6” 细 分 地 形 


首次 尝试 失败 ， 顶 点 数量 不 足 


增加 顶点 数量 的 一 个 好 方法 是 使 用 我 们 在 第 4 章 中 看 到 的 实例 化 。 
我 们 的 策略 是 让 曲面 细 分 器 生成 网 格 ， 并 使 用 实例 化 重复 数 次 。 在 顶点 
着 色 器 中 ， 我 们 构建 了 一 个 由 4 个 顶点 定义 的 补丁 ， 每 个 顶点 用 于 细 分 
网 格 的 每 个 角 。 在 我 们 的 C++/OpenGL 应 用 程序 中 ， 我 们 将 
DrawArrays() 调 用 更 改 为 gIDrawArraysInstanced()。 如 此 ， 我 们 指定 一 


个 64x64 个 补丁 的 网 格 ， 每 个 补丁 包含 一 个 细 分 级 别 为 32 的 网 格 。 这 将 
带 给 我 们 总 共 64x64x32x32 个 ， 或 者 说 超过 400 万 个 顶点 。 


顶点 着 色 器 首先 指定 4 个 纹理 坐标 (0,0)、(0,1)、(1,0) 和 (1,1)。 使 用 实 
例 化 时 ， 请 回想 一 下 ， 顶 点 着 色 器 可 以 访问 整数 变量 g]_InstanceID， 它 
包含 一 个 对 应 于 当前 正在 处 理 的 glDrawArraysInstancedO 调 用 的 计数 
咽 。 我 们 使 用 此 ID 值 来 分 配 大 网 格 中 各 个 补丁 的 位 置 。 补 丁 位 于 行 和 列 
中 ， 第 一 个 补丁 位 于 (0,0)， 和 第 二 个 位 于 (1,0)， 下 一 个 位 于 (2,0)， 依 此 类 
推 ， 第 一 列 中 的 最 后 一 个 补丁 在 (63,0)。 下 一 列 的 补丁 位 于 (0,1)、 
(1,1)， 依 此 类 推 ， 直 至 (63,1)。 最 后 一 列 的 补丁 位 于 (0,63)、(1,63)， 依 此 
类 推 ， 最 后 是 (63,63)。 给 定 补丁 的 X 坐 标 是 实例 ID 整除 64，Y 坐 标 是 实例 
ID 除 以 64《〈 整 数 除法 ) 。 然 后 着 色 器 将 坐标 向 下 缩放 到 范围 [0...1]。 


控制 着 色 器 没有 更 改 ， 除 了 它 将 顶点 和 纹理 坐标 传递 下 去 。 


接 下 来 ， 评 估 着 色 器 获取 传 入 的 细 分 网 格 顶 点 〈 由 gL_TessCoord 指 
定 ) 并 将 它们 移动 到 传 入 补丁 指定 的 坐标 范围 内 。 它 对 纹理 坐标 也 进行 
一 样 的 处 理 ， 并 且 也 会 以 与 程序 12.3 中 相同 的 方式 应 用 高 度 贴图 。 片 段 
着 色 器 没有 修改 。 




















每 个 组 件 的 更 改 显 示 在 程序 12.4 中 。 结 果 如 图 12.7 所 示 。 请 注意 ， 
Te Fa MINER R ELE E UT FR) RAS a A NR o 





图 12.7” 细 分 地 形 一 一 第 二 次 尝试 ， 使 用 实例 化 


程序 12.4 ”实例 化 细 分 地 形 





C++/OpenGL 应 用 程序 


// 和 贝 塞 尔 曲 面 例子 相同 ， 并 做 如 下 修改 
glPatchParameteri(GL_PATCH_VERTICES, 4); 
glDrawArraysInstanced(GL_PATCHES, ©, 4, 64*64); 


顶点 着 色 器 





out vec2 tc; 


void main(void) 
{ vec2 patchTexCoords[ ] = vec2[ ] (vec2(@,@), vec2(1,0), vec2(@,1), vec2( 
1,1)); 


// 基于 当前 是 哪个 实例 计算 出 坐标 偏 移 量 
int x = gl_InstanceID % 64; 
int y = gl_InstanceID / 64; 




















// 纹理 坐标 被 分 配 进 64 个 补 本 中， 并 归 一 化 到 [8. .1]。 翻 转 Y 轴 坐标 
tc = vec2( (x+patchTexCoords[gl_VertexID].x) / 64.0, (63 - y+patchTexCoo 
rds[gl_ VertexID].y) / 64.0); 





// 顶点 位 置 和 纹理 坐标 相同 ， 只 是 它 的 取 值 范围 从 -6.5 到 +6.5 

gl Position = vec4(tc.x - 6.5，6.6，(1.6 - tc.y) - @.5, 1.0); // 
并 且 将 Y 轴 坐标 翻转 回来 
} 


曲面 细 分 控制 着 色 器 























layout (vertices = 4) out; 
in vec2 tc[ ]; 
out vec2 tcs_out[ ]; 


void main(void) 


{ // 曲面 细 分 级 别 的 指定 和 之 前 例子 中 相同 

















tcs_out[gl_InvocationID] = tc[gl_InvocationID] ; 
gl_out[gl_ InvocationID].gl Position = gl_in[gl_ InvocationID].gl_ Position 











曲面 细 分 评估 着 色 器 














in vec2 tcs_out[ ]; 
out vec2 tes_out; 
void main (void) 
{ // 将 纹理 坐标 映射 到 传 入 的 控制 点 指定 的 子 网 格 上 
vec2 tc = vec2(tcs_out[@].x + (gl_TessCoord.x) / 64.0, tcs_out[@].y + (1 
.0 - gl TessCoord.y) / 64.0); 

















// 将 细 分 网 格 映射 到 传 入 的 控制 点 指定 的 子 网 格 上 
vec4 tessellatedPoint = vec4(gl_in[@].gl_ Position.x + gl_TessCoord.x / 6 
4.0, 0.0, 





gl_in[@].gl_ Position.z + gl TessCoord.y / 6 
4.0, 1.0); 





// 将 高 度 图 的 高 度 增 加 给 顶点 
tessellatedPoint.y += (texture(tex_height, tc).r) / 40.0; 
gl_ Position = mvp_matrix * tessellatedPoint; 

tes_out = tc; 


} 











现在 我 们 已 经 实现 了 高 度 贴图 ， 我 们 可 以 着 手 改进 它 并 整合 光照 。 
一 个 挑战 是 我 们 的 顶点 还 没有 与 它们 相关 的 法 同 量 。 另 一 个 挑战 是 简单 
地 使 用 纹理 图 像 作 为 蜗 度 图 产生 了 过 上 度 “ 锯 齿 状 * 的 结果 一 一 在 这 种 情况 
下 是 因为 并 非 纹 理 图 像 中 的 所 有 灰 度 变化 都 是 由 高 度 引 起 的 。 对 于 这 个 
特定 的 纹理 贴图 ，Hastings-Trew 已 经 生成 了 一 个 改进 的 高 度 贴图 ， 我 们 
可 以 使 用 里 下。 如 图 12.8 左 图 所 示 。 


我 们 可 以 通过 生成 相 邻 顶点 (或 高 度 图 中 的 相 邻 纹 素 )〉 的 高 度 ， 构 
建 连接 它们 的 同 量 以 及 使 用 叉 积 来 计算 法 癌 量 ， 以 动态 计算 和 创建 法 问 
量 。 这 需要 一 些 细微 的 调整 ， 具 体 取决 于 场景 的 精度 (和 /或 高 度 图 图 
像 )。 在 这 里 ， 我 们 使 用 GIMP‘“normalmap” 插 件 [S?16] 来 根据 Hastings- 
Trew 的 高 度 图 生成 法 线 贴图 ， 如 图 12.8 右 图 所 示 。 








图 12.8 月 球 表面 ;高 度 图 下 IT16] ( 左 ) 和 法 线 贴 图 CAD 

















我 们 对 代码 进行 的 大 部 分 更 改 现在 只 是 为 了 实现 Phong 着 色 的 标准 
J 
e C++/OpenGL 应 用 程序 。 
我 们 加 载 并 激活 一 个 额外 的 纹理 来 保存 法 线 贴 图 ， 还 添加 了 代码 来 
指定 光照 和 材质 ， 就 像 我 们 在 以 前 的 应 用 程序 中 所 做 的 那样 。 
。 顶点 着 色 器 。 
唯一 的 增补 是 光照 统一 变量 的 声明 和 法 线 贴 图 的 采样 器 。 通 第 在 项 
点 着 色 器 中 完成 的 光照 代码 被 移动 到 曲面 细 分 评估 着 色 器 ， 因 为 直到 曲 


面 细 分 阶段 才 生 成 顶点 。 
。 曲面 细 分 控制 着 色 器 。 
唯一 的 增补 是 光照 统一 变量 的 声明 和 法 线 贴图 的 采样 器 。 
。 曲面 细 分 评估 着 色 器 。 
Phong 光 照 的 准备 代码 现在 放 在 评估 着 色 器 中 : 


varyingVertPos = (mv_matrix * position).xyz; 





varyingLightDir = light.position - varyingVertPos; 


。 片段 着色 器。 


这 里 完成 了 用 于 计算 Phong (或 Blinn-Phong)〉 照 明 的 典型 代码 段 ， 
以 及 从 法 线 贴图 中 提取 法 向 量 的 代码 。 然 后 将 光照 结果 与 纹理 图 像 用 加 
权 求 和 的 方式 结合 起 来 。 


带 有 咒 度 和 法 线 贴图 以 及 Phong 照 明 的 最 终结 果 如 图 12.9 所 示 。 地 
形 现 在 会 啊 应 光照 。 在 此 示例 中 ， 位 置 光 已 放置 在 左 侧 图 像 中 心 的 左 
侧 ， 石 侧 图 像 中 心 的 右 侧 。 








图 12.9 具有 法 线 贴图 和 光照 的 曲面 细 分 地 形 《 光 源 分 别 位 于 左 侧 和 右 侧 ) 














尽管 从 静止 图 像 很 难 判断 出 对 光 的 移动 的 响应 ， 但 是 读者 应 该 能 够 
辨别 出 漫 射 光 的 变化 ， 并 且 山 峰 的 镜面 高 光 在 两 个 图 像 中 是 非常 不 同 
的 。 当 摄像 机 或 光源 移动 时 ， 这 当然 会 更 明显 。 结 果 仍 然 不 完美 ， 因 为 
无 论 什么 样 的 光照 ， 输 出 中 包含 的 原始 纹理 都 包括 了 将 出 现在 演 染 结果 
上 的 阴影 。 





12.4 ”控制 细节 级 别 (LOD) 


在 程序 12.4 中 ， 使 用 实例 化 来 实时 生成 数 百 万 个 项 点， 即使 是 装备 
精 展 的 现代 计算 机 也 可 能 会 感受 到 负担 。 羊 运 的 是 ， 将 地 形 划 分 为 单独 
的 补丁 的 策略 ， 正 如 我 们 为 增加 生成 的 网 格 项 点 的 数量 所 做 的 那样 ， 也 
为 我 们 提供 了 一 种 减少 负担 的 好 机 制 。 


在 生成 的 数 百 万 个 顶点 中 ， 许 多 顶点 不 是 必需 的 。 靠 近 摄 像 机 的 补 
本 中 的 顶点 非常 重要 ， 因 为 我 们 希望 能 够 识别 附近 物体 的 细节 。 但 是 ， 


补丁 越 远离 摄像 机 ， 甚 全 光栅 化 过 程 中 有 足够 的 像 系 来 体现 我 们 生成 的 
顶点 数量 的 可 能 性 就 越 小 ! 





根据 距 摄 像 机 的 距离 更 改 补丁 中 的 顶点 数量 是 一 种 称 为 细 方 级 别 或 
LOD 的 技术 。Sellers 等 人 描述 了 一 种 通过 修改 控制 着 色 器 来 控制 实例 化 
曲面 细 分 中 的 LOD 的 方法 SW13]。 程 序 12.5 显 示 了 Sellers 等 人 的 方法 的 简 
化 版 本 。 货 略 是 使 用 补丁 的 感知 大 小 来 确定 其 曲面 细 分 级 别 的 值 。 由 于 
补丁 的 细 分 网 格 最 终 将 放置 在 由 进入 控制 着 色 需 的 4 个 控制 点 定义 的 方 
格 内 ， 我 们 可 以 使 用 控制 点 相对 于 摄像 机 的 位 置 来 确定 应 该 为 补丁 生成 
多 少 个 顶点 。 其 步骤 如 下 。 





(1) 通过 将 MVP 和 矩阵 应 用 于 4 个 控制 点 ， 计 算 它 们 的 屏幕 位 置 。 





(2) 计算 由 控制 点 《在 屏幕 上 的 空间 中 ) 定义 的 正方 形 边 长 〈 即 
览 度 和 高 度 ) 。 请 注意 ， 即 使 4 个 控制 点 形成 正方 形 ， 这 些 边 长 也 可 能 
不 同 ， 因 为 应 用 了 透视 矩阵 。 


C3) 根据 曲面 细 分 级 别 所 需 的 精度 (基于 高 度 图 中 的 细节 数 
量 ) ， 将 长 度 的 值 按 可 调整 单数 进行 缩放 。 


(4) 将 缩放 长 度 值 加 1， 以 避免 将 曲面 细 分 级 别 指定 为 0〈 这 将 导 
致 不 生成 项 点 ) 。 


(5) 将 曲面 细 分 级 别 设置 为 相应 的 计算 宽度 和 高 度 值 。 


回想 一 下 ， 在 我 们 的 实例 中 ， 我 们 不 是 只 创建 一 个 网 格 ， 而 是 创建 
64x64 个 网 格 。 因 此 ， 对 每 个 补丁 执行 以 上 列表 中 的 5 个 步骤 ， 细 节 级 别 
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所 有 更 改 都 在 控制 着 色 器 中 ， 并 显示 在 程序 12.5 中 ， 生 成 的 输出 如 
图 12.10 所 示 。 请 注意 ， 变 量 glL_InvocationID 指 的 是 正在 处 理 补丁 中 的 哪 
个 顶点 《而 不 是 正在 处 理 哪个 补丁 ) 。 因 此 ， 告 诉 曲面 细 分 器 在 每 个 补 
本 中 生成 多 少 个 顶点 的 LOD 计 算 发 生 在 每 个 补丁 的 第 0 个 顶点 期 间 。 








程序 12.5 ”曲面 细 分 细节 级 别 LOD) 
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void main(void) 
{ float subdivisions = 16.0; // 基于 高 度 图 中 细节 密度 的 可 调整 的 常量 
if (gl_InvocationID == 6) 
= mvp * gl in[@].gl Position; // 屏幕 空间 中 控制 点 的 位 置 
mvp * gl_in[1].gl_Position; 
mvp * gl in[2].gl_ Position; 
pQ.w; 
p1.w; 
p2.w; 
float width = length(p2.xy - p@.xy) * subdivisions + 1.0; // 
细 分 网 格 的 感知 "宽度 " 
float height = length(p1.xy - p@.xy) * subdivisions + 1.0; // 
细 分 网 格 的 感知 "高 度 " 
gl_TessLevelOuter[0] = height; // 基于 感知 的 边 长 设置 曲面 细 分 级 



























































gl_TessLevelOuter[1] 
gl_TessLevelOuter[2] 
gl_TessLevelOuter[3] 
gl_TessLevelInner[@] 
gl_TessLevelInner[1] 


width; 
height; 
width; 
width; 
height; 

















} 

//” 像 以 前 一 样 将 纹理 坐标 和 控制 点 发 送 给 TES 

tcs_out[gl InvocationID] = tc[gl_InvocationID]; 
gl_out[gl_InvocationID].gl Position = gl in[g] InvocationID].gl Position 











将 这 些 控制 着 色 器 的 更 改 应 用 于 图 12.7 中 我 们 场景 的 实例 化 (但 不 
TOCE) 版 本 ， 并 将 高 度 图 替换 为 Hastings-Trew 的 更 精细 调整 的 版 本 
《如 图 12.8 所 示 ) ， 将 会 生成 改善 的 场景 ， 带 有 更 通 真 的 地 平 线 细节 


(如 图 12.10 所 示 ) 。 


在 此 示例 中 ， 更 改 评估 着 色 器 中 的 布局 说 明 符 也 很 有 用 : 


layout (quads, equal_spacing) in; 


更 改 为 : 


layout (quads, fractional_even_spacing) in; 














图 12.10 具有 控制 细节 级 别 LOD) 的 曲面 细 分 月 亮 





在 静止 图 像 中 难以 说 明 这 种 修改 的 原因 。 在 动画 场景 中 ， 当 曲面 细 
分 对 象 在 3D 空 间 中 移动 时 ， 如 果 使 用 LOD， 有 时 可 以 在 对 象 表面 上 看 
到 曲面 细 分 级 别 的 变化 ， 看 起 来 像 一 种 叫 作 “弹出 ”的 摆动 伪 影 。 从 等 间 
距 变 为 分 数 间 距 ， 通 过 使 相 邻 补丁 实例 的 网 格 几何 体 更 相似 ， 达 成 了 即 





使 它们 的 细 市 级 别 不 同 ， 也 可 以 减少 此 影响 的 目的 。( 参 见习 题 12.2 和 
1233 
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LOD， 场 景 可 能 会 出 现 不 稳定 或 滞后 的 情况 。 


将 这 种 简单 的 LOD 技 术 应 用 于 包含 Phong 着 色 的 版 本 〈 程 序 12.4) 
有 点 理 手 。 这 是 因为 相 邻 补丁 实例 之 间 的 LOD 变 化 反 过 来 会 导致 相关 法 
向 量 的 突然 变化 ， 从 而 导致 光照 中 的 弹出 伪 影 ! 与 以 往 一 样 ， 在 构建 复 
杂 的 3D 场 景 时 需要 权衡 和 妥协 。 








补充 说 明 


将 曲面 细 分 与 LOD 组 合 在 实时 虚拟 现实 应 用 中 特别 有 用 ， 例 如 在 计 
算 机 游戏 中 ， 其 需要 复杂 的 现实 主义 细 市 和 频繁 的 物体 移动 和 /或 摄像 
机 位 置 的 变化 。 在 本 章 中 ， 我 们 已 经 说 明了 曲面 细 分 和 LOD 用 于 实时 地 
形 生成 的 应 用 场景 ， 尽 管 它 也 可 以 应 用 于 其 他 领域 ， 例 如 3D 模 型 的 位 
移 贴 图 (曲面 细 分 项 后 被 添加 到 模型 的 表面 ， 然 后 被 移动 以 便 添加 细 
W 在 计算 机 辅助 设计 应 用 程序 中 也 很 有 用 。 





Sellers 等 人 通过 消除 摄像 机 后 方 的 补丁 中 的 顶点 (他 们 通过 将 内 部 
和 外 部 级 别 设置 为 零 来 实现 这 一 点 ) SW13]， 进 一 步 扩 展 了 LOD 技 术 
《在 程序 12.5 中 显示 ) 。 这 是 一 个 剔除 技术 的 示例 ， 是 一 项 非常 有 用 的 
技术 ， 因 为 实例 化 细 分 的 负载 仍然 可 以 在 系统 上 正常 运行 





程序 12.1 中 描述 的 createShaderProgram0 的 4 参数 版 本 被 添加 到 
Utils.cpp 文 件 中 。 稍 后 ， 我 们 将 添加 其 他 版 本 以 适应 几何 着 色 器 阶段 。 


习题 


12.1 修改 程序 12.1 以 试验 内 部 和 外 部 曲面 细 分 级 别 的 各 种 值 ， 并 
观察 生成 的 演 染 网 格 。 


12.2 ”修改 程序 12.1， 将 评估 着色 器 中 的 布局 说 明 符 从 
equal_spacing 更 改 为 fractional _even_spacing， 如 第 12.4 节 所 述 。 观 察 对 
生成 的 网 格 的 影响 。 


12.3 测试 程序 12.5， 将 评估 着 色 器 中 的 布局 说 明 符 设置 为 
equal_spacing， 人 然后 设置 为 fractional _even_spacing， 如 第 12.4 节 所 述 
在 摄像 机 移动 时 观察 泻 染 表 面 上 的 效果 。 您 应 该 能 够 在 第 一 种 情况 下 观 
察 弹 出 伪 影 ， 这 在 第 二 种 情况 下 大 多 得 到 绥 解 。 








12.4 《项 目 ) 修改 程序 12.3 以 使 用 自己 设计 的 高 度 图 (可 以 使 用 

之 前 在 习题 10.2 中 构建 的 高 度 图 ) 。 然 后 添加 光照 和 阴影 贴图 ， 以 便 细 

分 地 形 投射 阴影 。 这 是 一 个 复杂 的 练习 ， 因 为 第 一 个 和 第 二 个 阴影 贴图 
过 程 中 的 某 些 代码 需要 被 移动 到 评估 着 色 器 中 。 
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[1] GLU 工 具 集 之 前 已 经 包含 了 一 个 名 为 gluTess 的 曲面 细 分 实用 程 
序 。2001 年 ，Radeon 发 布 了 第 一 球 带 有 曲面 细 分 文 持 的 商用 图 形 卡 ， 但 
很 少 有 工具 可 以 利用 和 它 。 


[2] 或 线段 ， 但 我 们 将 专注 于 三 角形 。 


[3] 曲面 细 分 器 还 能 够 构建 由 三 角形 组 成 的 三 角形 网 格 ， 但 本 书 中 未 对 
此 进行 介绍 。 





[4] 在 菜 些 应 用 程序 中 ， 纹 理 坐 标 是 在 外 部 生成 的 ， 例 如 ， 在 使 用 曲面 
细 分 为 导入 的 模型 提供 额外 顶点 时 。 在 这 种 情况 下 ， 需 要 对 提供 的 纹理 
坐标 进行 插值 。 





第 13 章 ”几何 着 色 需 


在 OpenGL 管 线 中 ， 紧 跟着 曲面 细 分 阶段 的 是 几何 阶段 。 在 这 一 阶 
段 中 ， 程 序 员 可 以 选择 包含 几何 着 色 器 。 这 个 阶段 实际 上 在 曲面 细 分 阶 
段 出现 之 前 就 已 经 存在 ， 它 在 3.2 版 本 (2009 年 ) 成 为 OpenGL 核 心 的 一 


部 分 。 





与 曲面 细 分 一 样 ， 几 何 着 色 峰 使 程序 员 能 够 以 顶点 着 色 器 中 无 法 实 
现 的 方式 操纵 顶点 组 。 在 某 些 情况 下 ， 可 以 使 用 曲面 细 分 着 色 器 或 者 几 
何 着 色 器 完成 同样 的 任务 ， 因 为 它们 的 功能 在 某 些 方面 重 登 。 





13.1 OpenGL 中 的 逐个 图 元 处 理 


几何 着 色 器 阶段 位 于 曲面 细 分 和 光栅 化 之 间 ， 位 于 用 于 图 元 处 理 的 
管线 段 内 〈 见 图 2.2) 。 顶 点 着 色 器 允许 一 次 操作 一 个 顶点 ， 而 片段 着 
色 器 一 次 可 以 操作 一 个 片段 (实际 上 是 一 个 像素 ) ， 但 几何 着 色 器 却 可 
以 一 次 操作 一 个 图 元 。 


回想 一 下 ， 图 元 是 OpenGL 中 绘制 对 象 的 基本 元 件 。 只 有 少数 几 种 
类 型 的 图 元 ; 我 们 将 主要 关注 操纵 三 角形 图 元 的 几何 着 色 嚣 。 因 此 ， 当 
我 们 说 几何 着 色 器 可 以 一 次 操作 一 个 图 元 时 ， 我 们 通常 意味 着 着 色 器 
次 可 以 访问 三 角形 的 3 个 顶点 。 几 何 着 色 器 允许 一 次 性 访问 图 元 中 的 所 
ATHA. An: 











。 输出 相同 的 图 元 保持 不 变 ; 

。 输出 修改 了 顶点 位 置 的 相同 类 型 图 元 ; 
。 输出 不 同类 型 的 图 元 ; 

。 输出 更 多 的 其 他 图 元 ; 

。 删除 图 元 “根本 不 输出 ) 。 





与 曲面 细 分 评估 着 色 器 类 似 ， 可 以 在 几何 着 色 需 中 将 传 入 的 顶点 属 
性 作为 数组 进行 访问 。 但 是 ， 在 几何 着 色 器 中 ， 传 入 属性 数组 仅 索引 到 
图 元 尺寸 那么 大 。 例 如 ， 如 果 图 元 是 三 角形 ， 则 可 用 索引 为 0、1、2。 
使 用 预先 定义 的 数组 gl_in 访 问 顶 点 数据 本 里 ， 如 下 所 示 。 








gl_in[2].gl_ Position // 第 三 个 顶点 的 位 置 





与 曲面 细 分 评估 痢 色 器 类 似 ， 几 何 着 色 需 输出 的 顶点 属性 都 是 标 
也 就 是 说 ， 输 出 是 形成 图 元 的 各 个 顶点 (它们 的 位 置 和 其 他 属性 变 
如 果 有 的 话 ) 的 流 。 


a 


a 


有 一 个 布局 修饰 符 用 于 设置 图 元 输入 /输出 类 型 和 输出 大 小 。 特 殊 
的 GLSL 命 令 EmitVertex() 指 定 了 将 要 输出 一 个 顶点 。 特 殊 的 GLSL 命 令 
EndPrimitive() 表 示 一 个 特定 的 图 元 构建 完成 。 





有 一 个 内 置 变量 gL_PrimitiveIDIn， 它 保存 当前 图 元 的 ID。ID 从 0 开 
始 ， 并 计数 到 图 元 总 数 减 1。 


我 们 将 探讨 四 种 第 见 的 操作 类 型 : 


ad 修改 图 元 ; 
° 删除 图 元 ; 


。 添 加 图 元 ; 
e 更改 图 元 类 型 。 


13.2 ”修改 图 元 


当 通 过 对 图 元 (通常 为 三 角形 〉 的 单独 更 改 就 可 以 影响 对 象形 状 的 
改变 时 ， 使 用 几何 着色 器 束 很 方便 。 





例如 ， 考 虑 我 们 之 前 在 图 7.12 中 呈现 的 环 面 。 假 设 环 面 代表 内 部 的 
空间 (例如 当 表 示 轮 胎 时 〉 ， 而 我 们 想 要 给 它 “ 充 气 ”。 简 单 地 在 
C++/OpenGL 代 码 中 应 用 比例 缩放 因子 将 无 法 实现 这 一 点 ， 因 为 它 的 基 
本 形状 不 会 改变 。 想 要 让 其 显示 出 “充气 ”的 外 观 ， 还 需要 在 环 面 伸 入 空 
的 中 心 空间 时 使 内 孔 变 小 。 


解决 这 个 问题 的 一 种 方法 是 将 表面 法 癌 量 添加 到 每 个 顶点。 虽然 这 
可 以 在 顶点 着 色 器 中 完成 ， 但 是 我 们 在 几何 着 色 器 中 进行 练习 。 程 序 
13.1 显 示 了 GLSL 几 何 着 色 器 的 代码 。 其 他 模块 与 程序 7.3 相 同 ， 只 有 一 
些小 改动 : 片段 着 色 器 输入 名 称 现在 需要 反映 几何 着 色 器 的 输出 〔 例 
如 ，varyingNormal 变 为 varyingNormalG ) ，C++/OpenGL 应 用 程序 需要 
编译 几何 着 色 器 并 在 链接 之 前 将 其 附加 到 着 色 嚣 程序。 新 着 色 器 被 指定 
为 几何 着 色 器 ， 如 下 所 示 。 


GLuint gShader = glCreateShader(GL GEOMETRY_SHADER); 


程序 13.1 几何 着 色 器 : 修改 顶点 


#version 430 











layout (triangles) in; 


in vec3 varyingNormal[ ]; // 来 自 顶点 着 色 器 的 输入 
in vec3 varyingLightDir[ ]; 
in vec3 varyingHalfVector[ ]; 








out vec3 varyingNormalG; // 输出 给 光栅 着 色 器 然后 到 片段 着 色 器 
out vec3 varyingLightDirG; 
out vec3 varyingHalfVectorG; 








layout (triangle strip, max_vertices=3) out; 





// EERDER St — 3e ee Al DA BE 





void main (void) 
{ // 沿 着 法 向 量 移动 项 点 ， 并 将 其 他 顶点 属性 原样 传递 
for (int i=@; i<3; i++) 
{ gl Position = proj_matrix * 
gl_in[i].gl_ Position + normalize(vec4(varyingNormal[i],1.0)) * 0.4; 
varyingNormalG = varyingNormal[i]; 
varyingLightDirG = varyingLightDir[i]; 
varyingHalfVectorG = varyingHalfVector[i]; 
EmitVertex(); 


























EndPrimitive(); 


} 








在 程序 13.1 中 需要 注意 ， 与 顶点 着 色 器 的 输出 变量 对 应 的 输入 变量 
被 声明 为 数组 。 这 为 程序 员 提 供 了 一 种 机 制 ， 可 以 使 用 索引 0、1 和 2 访 
问 三 角形 图 元 中 的 每 个 顶点 及 其 属性 。 我 们 希望 沿 着 它们 的 表面 法 癌 量 
问 外 移动 这 些 顶 点 。 在 顶点 着 色 嚣 中， 顶点 和 法 向 量 都 已 经 被 转换 到 视 
图 空间 。 我 们 为 每 个 传 入 的 顶点 位 置 (gl_in[i].gl_Position〉 添加 法 辐 量 
的 一 小 部 分 ， 然 后 将 投影 矩阵 应 用 于 结果 ， 生 成 每 个 输出 gL_Position 。 

















图 13.1 “充气 ”的 环 面 ， 顶 点 由 几何 着 色 器 修改 

















值得 注意 的 是 ， 使 用 GLSL 调 用 EmitVertex() 来 指定 我 们 何 时 完成 了 
计算 输出 g]_Position 及 其 相关 的 顶点 属性 并 准备 输出 顶点 。 


EndPrimitive() 调 用 指定 我 们 已 经 完成 了 组 成 图 元 (在 本 例 中 为 三 角形 ) 
的 一 组 顶点 的 定义 。 结 果 如 图 13.1 所 示 。 


几何 着 色 器 包括 两 个 布局 限定 符 。 第 一 个 指定 输入 图 元 类 型 ， 并 且 
必须 与 C++ 端 glDrawArrays0) 或 glDrawElements0O) 调 用 中 的 图 元 类 型 兼 
容 。 选 项 如 表 13.1 所 示 。 


表 13.1 图 元 输入 类 型 的 选项 


几何 着 色 器 输入 
o 与 gIDrawArrays() 调 用 兼容 的 图 元 类 型 





每 次 调用 顶点 
的 数量 











eS = 





GL_LINES_ADJACENCY, 
lines_adjacency 4 
GL_LINE_STRIP_ADJACENCY 





GL_TRIANGLES, GL_TRIANGLE_STRIP, 
GL_TRIANGLE_FAN 


CL_TRIANGLES_ADJACENCY, 
triangles_adjacency 
GL_TRIANGLE_STRIP_ADJACENCY 





各 种 OpenGL 图 元 类 型 〈 包 括 “strip” 和 “fan” 类 型 ) 在 第 4 章 中 讲 
过 .“ 相 邻 ?类 型 在 OpenGL 中 用 来 与 几何 着 色 器 一 起 使 用 ， 并 且 它 们 可 
以 访问 与 图 元 相 邻 的 顶点 。 我 们 在 本 书 中 不 使 用 它们 ， 但 为 了 完整 性 ， 
依然 列 出 它们 。 


输出 图 元 类 型 必须 是 points、line_strip 或 triangle_strip 。 请 注意 ， 输 
出 布局 限定 符 也 会 指定 着 色 器 在 每 次 调用 中 输出 的 最 大 顶点 数 。 








在 顶点 着 色 器 中 可 以 更 容易 地 对 环 面 进 行 这 种 特定 的 改变 。 然 而 ， 
假设 不 是 沿 着 自己 的 表面 法 向 量 向 外 移动 每 个 顶点 ， 而 是 希望 将 每 个 三 
角形 沿 其 表面 法 向 量 向 外 移动 ， 实 际 上 是 将 环 面 的 组 成 三 角形 向 外 “ 爆 
炸 ”。 项 点 着 色 器 做 不 到 这 一 点 ， 因 为 计算 三 角形 的 法 向 量 需要 对 3 个 三 
角形 顶点 的 顶点 法 向 量 进行 平均 ， 并 且 顶 点 着 色 器 一 次 只 能 访问 三 角形 
中 一 个 顶点 的 顶点 属性 。 但 是 ， 我 们 可 以 在 几何 着 色 器 中 执行 此 操作 ， 
因为 几何 着 色 器 可 以 访问 每 个 三 角形 中 的 所 有 3 个 顶点 。 我 们 平均 它们 
的 法 向 量 来 计算 三 角形 的 曲面 法 向 量 ， 然 后 将 该 平均 法 向 量 加 给 三 角形 




















图 元 中 的 每 个 顶点 。 图 13.2、 图 13.3 和 图 13.4 分 别 显示 了 曲面 法 向 量 的 
平均 值 、 修 改 后 的 几何 着 色 器 main0 代 码 和 输出 的 结 


原 法 向 量 : 








图 13.2 ”将 平均 三 角形 曲面 法 向 量 应 用 于 三 角形 顶点 


void main (void) 


{ W 对 三 角形 3 个 顶点 法 向 量 取 平均 值 ， 得 到 三 角形 的 曲面 法 向 量 





W 将 三 个 点 都 沿 所 得 法 向 量 移动 
for (i=0; i<3; i++) 
{ gl Position = proj_matrix * (gl_in[i].gl_Position + normalize(triangleNormal) * 0.4); 
varyingNormalG = varyingNormal[i]; 
varyingLightDirG = varyingLightDir[i]; 
varyingHalfVectorG = varyingHalfVector{i]; 
EmitVertex(); 


} 
EndPrimitive(); 





图 13.3 ”修改 了 几何 着 色 器 ， 用 于 “爆炸 ” 环 面 








图 13.4 “爆炸 ”的 环 面 


通过 确保 环 面 的 内 部 也 是 可 见 的 《通常 这 些 三 角形 会 被 OpenGL 吻 
除 ， 因 为 它们 是 “背面 >) ， 可 以 改善 “爆炸 ? 环 面 的 外 观 。 一 种 解决 方式 
we (EFA TE TER PAK, RAEE INET, REESE E 
MEE MUS Se SK by EA SF RES TA A I) 7» BEE TERIA a7) 。 
我 们 还 向 着 色 器 (通过 统一 变量 ) 发 送 一 个 标志 ， 以 禁用 背 疝 三 角形 上 
的 漫 反 射 和 镜面 光 ， 以 使 它们 不 那么 突出 。 代 码 的 更 改 如 下 。 


对 display(0) 函 数 的 修改 : 


// 绘制 前 向 三 角形 一 启用 光照 

glUniform1i(lLoc, 1); // 用 来 启用 、 禁 用 漫 反 射 、 镜 面 光 组 件 的 统一 变量 的 位 置 
glFrontFace(GL_CCW); 

glDrawElements(GL_TRIANGLES, numTorusIndices, GL_UNSIGNED_INT, @); 























// 绘制 后 向 三 角形 一 禁用 光照 

glUniform1i(lLoc, @); 

glFrontFace(GL_Cw); 

glDrawElements(GL_TRIANGLES, numTorusIndices, GL_UNSIGNED_INT, @); 








hr Bee Car KIB CX: 


if (enableLighting == 1) 

{ fragColor = .… // 当 演 染 前 向 表面 时 ， 使 用 正常 的 光照 计算 
} 
else // 当 演 染 后 向 表面 时 ， 只 局 用 环境 光照 组 件 

{ fragColor = globalAmbient * material.ambient + light.ambient * material. 
ambient; 


} 






































由 此 产生 的 “爆炸 ? 环 面 ， 包 括 背 面 ， 如 图 13.5 所 示 。 








图 13.5 “爆炸 ”的 环 面 ， 包 括 背 面 











13.3 删除 图 元 


几何 着 色 器 的 一 个 常见 用 途 是 通过 合理 地 删除 一 些 图 元 来 从 简单 的 
对 象 构建 丰富 的 闭 饰 对 象 。 例 如 ， 从 我 们 的 环 面 中 移 除 一 些 三 角形 可 以 
将 其 变 成 一 种 复杂 的 格子 结构 ， 而 从 零 开 始 建 模 这 个 结构 是 更 加 困难 
的 。 执 行 此 操作 的 几何 着 色 器 显示 在 程序 13.2 中 ， 输 出 如 图 13.6 所 示 。 








图 13.6 ”几何 着 色 器 : 删除 图 元 








程序 13.2 ”几何 着 色 器 : 删除 图 元 





// 输入 、 输 出 和 统一 变量 和 以 前 一 样 








void main (void) 
{ if ( mod(gl_PrimitiveIDIn,3) != @ ) 
{ for (int i=@; i<3; i++) 
{ gl Position = proj_matrix * gl in[i].gl_ Position; 


varyingNormalG = varyingNormal[i]; 
varyingLightDirG = varyingLightDir[i]; 
varyingHalfVectorG = varyingHalfVector[i]; 
EmitVertex(); 


} 
} 


EndPrimitive() ; 


} 





不 需要 对 代码 进行 其 他 更 改 。 请 注意 这 里 使 用 了 mod 函 数 一 一 所 有 
顶点 ， 除 了 每 3 个 图 元 中 的 第 一 个 图 元 的 顶点 被 忽略 之 外 ， 都 被 传递 。 


KE V9 


在 这 里 ， 泻 染 背 同 三 角形 也 可 以 提高 真实 感 ， 如 图 13.7 所 示 。 








图 13.7 SNA AY Ac 





13.4 Iu BIJE 


EFJ LA) E Ear A A ie A H SYA R E N EEE RRE Ys 
SPAT IGA AVE TC 0 KAEA DA EIT AIR R E AT DA E rey 
度 贴图 ， 或 者 完全 改变 对 象 的 形状 之 类 的 事情 。 








考虑 以 下 示例 ， 我 们 将 环 面 中 的 每 个 三 角形 更 改 为 一 个 微小 的 三 角 


我 们 的 全 略 类 似 于 我 们 之 前 的 “爆炸 ” 环 面 示例 ， 如 图 13.8 所 示 。 传 
入 三 角形 图 元 的 顶点 用 于 定义 金字 塔 的 基 座 。 人 金字 塔 的 壁 由 那些 顶点 和 
通过 平均 原始 项 扣 的 法 同 量 计算 的 新 点 〈 称 为 “尖峰 扣 ”) 构成 。 然 后 通 
过 从 尖峰 点 到 基 座 的 两 个 向 量 的 叉 积 计算 金字 塔 的 3 个 “ 边 ” 中 的 每 一 个 
的 新 法 问 量 。 


， 原 法 向 量 :。。 取 平 均值; 


计算 新 法 向 量 





图 13.8 将 三 角形 转换 为 金字 塔 


程序 13.3 中 的 几何 着 色 器 为 环 面 中 的 每 个 三 角形 图 元 执行 此 操作 。 
对 于 每 个 输入 三 角形 ， 它 输出 3 个 三 角形 图 元 ， 总 共 9 个 顶点 。 每 个 新 三 
角形 都 在 函数 makeNewTriangle() 中 构建 ， 该 函数 被 调用 3 次 。 它 计算 指 
定 三 角形 的 法 向 量 ， 然 后 调用 函数 setOutputValues0 为 发 出 的 每 个 顶点 
分 配 适 当 的 输出 顶点 属性 。 在 发 出 所 有 3 个 顶点 之 后 ， 它 调用 


EndPrimitive()。 为 了 确保 准确 地 执行 光照 ， 为 每 个 新 创建 的 顶点 计算 光 
照 方 同 回 量 的 新 值 。 


程序 13.3 ”几何 着 色 器 : 添加 图 元 











vec3 newPoints[ ], lightDir[ ]; 
float sLen = 0.01; // sLen 是 "尖峰 长 度 "， 小 金字 塔 的 高 度 








void setOutputValues(int p, vec3 norm) 
{ varyingNormal = norm; 
varyingLightDir = lightDir[p]; 
varyingVertPos = newPoints[p]; 
gl Position = proj_matrix * vec4(newPoints[p], 1.0); 


void makeNewTriangle(int p1, int p2) 

{ // 为 这 个 三 角形 生成 表面 法 向 量 
vec3 c1 = normalize(newPoints[p1] - newPoints[3]); 
vec3 c2 = normalize(newPoints[p2] - newPoints[3]); 
vec3 norm = cross(c1,c2); 














// 生成 并 发 出 3 个 顶点 

setOutputValues(p1, norm); EmitVertex(); 
setOutputValues(p2, norm); EmitVertex(); 
setOutputValues(3, norm); EmitVertex(); 
EndPrimitive(); 





} 


void main(void) 

{ // 给 三 个 三 角形 顶点 加 上 原始 表面 法 向 量 
vec3 sp = gl _ in[@].gl Position.xyz + varyingOriginalNormal[@]*sLen; 
vec3 sp1 = gl _in[1].gl_ Position.xyz + varyingOriginalNormal[1]*sLen; 
vec3 sp2 = gl _ in[2].gl Position.xyz + varyingOriginalNormal[2]*sLen; 


























// 计算 组 成 小 金字 塔 的 新 点 

newPoints[@] = gl_in[0].gl_Position.xyz; 
newPoints[1] = gl_in[1].gl_Position.xyz; 
newPoints[2] gl_in[2].gl_Position.xyZz; 
newPoints[3] = (sp@ + sp1 + sp2)/3.0; // 尖峰 点 








// 计算 从 顶点 到 光照 的 方向 

lightDir[@] = light.position - newPoints[6]; 
lightDir[1] = light.position - newPoints[1]; 
lightDir[2] light.position - newPoints[2]; 
lightDir[3] = light.position - newPoints[3]; 





// 构建 3 个 三 角形 ， 以 组 成 小 金字 塔 的 表面 
makeNewTriangle(@,1); // 第 三 个 点 永远 是 尖峰 点 
makeNewTriangle(1,2); 
makeNewTriangle(2,0); 

















结果 输出 如 图 13. ae sale AIRE (sLen) 变量 增加 ， 则 添加 
的 表面 “金字 塔 ” 将 更 高 。 然 而 ， 在 没有 阴影 的 情况 下 ， 它 们 可 能 看 起 来 
并 不 真实 。 P a 妆 作 练习 。 





413.9 ”几何 着 色 器 : 添加 图 元 





仔细 应 用 这 种 技术 可 以 模拟 尖峰 、 荆 琼 和 其 他 精细 表面 突起 ， 或 者 
RARER Mii (参考 资料 DY14 TR13,K516]) 等 。 


13.5 更改 图 元 类 型 


OpenGL 人 允许 在 几何 着 色 器 中 更 改 图 元 类 型 。 此 功能 的 一 个 第 见 用 
途 是 将 输入 三 角形 转换 为 一 个 或 多 个 输出 线段 ， 来 模拟 毛发 或 头 及 。 虽 
然 生 成 令 人 信服 的 头发 仍然 是 更 难 的 现实 世界 项 目 之 一 ， 但 几何 着 色 器 
可 以 在 许多 情况 下 帮助 实现 实时 泻 染 。 








程序 13.4 显 示 了 一 个 几何 着 色 器 ， 它 将 每 个 输入 的 3 个 顶点 的 三 角 
形 转换 为 一 个 向 外 的 两 个 项 点 的 线段 。 它 首先 通过 平均 三 角形 顶点 位 置 
生成 三 角形 的 质心 ， 来 计算 头发 束 的 起 点 。 然 后 它 使 用 和 程序 13.3 中 相 
同 的 “尖峰 点 ”作为 头发 的 终点 。 输 出 图 元 被 指定 为 具有 两 个 顶点 的 线 
段 ， 第 一 个 顶点 是 起 点 ， 第 二 个 顶点 是 终点 。 结 果 显示 在 图 13.10 中 ， 
用 于 实例 化 维 数 为 72 个 切片 的 环 面 。 











图 13.10 ”将 三 角形 图 元 更 改 为 线 图 元 











当然 ， 这 仅仅 是 产生 完全 逼真 头发 的 起 点 。 使 头发 弯曲 或 移动 将 需 
要 在 干 修改 ， 例 如 为 线条 生成 更 多 顶点 并 治 曲线 计算 它们 的 位 置 和 /或 
结合 随机 性 。 由 于 线段 没有 明显 的 表面 法 向 量 ， 光 照会 很 复杂 ; 在 这 个 
例子 中 ， 我 们 简 蛙 地 指定 法 问 量 与 原始 三 角形 的 表面 法 向 量 相同 。 





程序 13.4 ”几何 着 色 器 : 改变 图 元 类 型 








layout (line strip, max_vertices=2) out; 


void main(void) 
{ vec3 op6 = gl _in[@].gl_ Position. xyz; // 
原始 三 角形 顶点 

vec3 op1 = gl_in[1].gl_Position.xyz; 

vec3 op2 = gl_in[2].gl_Position.xyz; 

vec3 ep6 = gl _in[@].gl Position.xyz + varyingNormal[@]*sLen; // 
偏 移 三 角形 顶点 

vec3 ep1 = gl_in[1].gl Position.xyz + varyingNormal[1]*sLen; 

vec3 ep2 = gl1 _in[2].gl Position.xyz + varyingNormal[2]*sLen; 


// 计算 组 成 小 线段 的 新 点 





vec3 newPoint1 = (op@ + op1 + op2)/3.0; // 原始 (起 始 ) 点 
vec3 newPoint2 = (ep@ + ep1 + ep2)/3.0; // 结束 点 





gl Position = proj matrix * vec4(newPoint1, 1.0); 
varyingVertPosG = newPoint1; 
varyingLightDirG = light.position - newPoint1; 


varyingNormalG = varyingNormal[@]; 
EmitVertex(); 


gl Position = proj_matrix * vec4(newPoint2, 1.0); 
varyingVertPosG = newPoint2; 

varyingLightDirG = light.position - newPoint2; 
varyingNormalG = varyingNormal[1]; 

EmitVertex(); 


EndPrimitive(); 





补充 说 明 


几何 着 色 器 吸引 人 的 一 点 在 于 它们 相对 容易 使 用 。 虽 然 几 何 着 色 器 
的 许多 应 用 可 以 使 用 曲面 细 分 来 实现 ， 但 几何 着 色 器 的 机 制 通常 使 它们 





更 容易 实现 和 调试 。 当 然 ， 几 何 与 曲面 细 分 的 相对 适用 范围 取决 于 特定 
的 应 用 。 


生成 令 人 信服 的 真实 头发 或 毛发 具有 挑战 性 ， 并 且 根 据 应 用 场景 需 
要 采用 多 种 技术 。 在 某 些 情况 下 ， 简 单 的 纹理 就 足够 了 了， 或 者 可 以 使 用 
曲面 细 分 或 几何 着 色 器 ， 例 如 本 章 所 示 的 基本 技术 。 当 需要 更 真实 的 效 
果 时 ， 移 动 〈 动 画 ) 和 光照 变 得 理 手 。 头 发 和 毛发 生成 的 两 个 专用 工具 
是 HairWorks 和 TressFX。HairWorks 是 NVIDIA GameWorks 套 件 [cw18] 的 
一 部 分 ， 而 TressFX 是 由 AMD 开 发 的 LTR18]。 前 者 适用 于 OpenGL 和 
DirectX， 而 后 者 仅 适 用 于 DirectX。 使 用 TressFX 的 例子 可 以 在 [SP? 均 中 找 
到 。 





习题 


13.1 ”修改 程序 13.1， 使 其 将 每 个 项 操 略 微 移 辐 其 原始 三 角形 的 中 
心 。 结 果 应 该 类 似 于 图 13.5 中 的 爆炸 环 面 ， 但 没有 坏 面 尺寸 的 整体 变 
Wo 


13.2 ”修改 程序 13.2， 使 其 删除 每 第 2 个 图 元 或 每 第 4 个 图 元 〈 而 不 
征 每 第 3 个 图 元 ) ， 并 观察 对 生成 的 泻 染 环 面 的 影响 。 此 外 ， 演 试 将 实 
例 化 环 面 的 维度 更 改 为 不 是 3 的 倍数 的 值 〈 例 如 40) ， 同 时 仍然 删除 每 
第 3 个 图 元 ， 这 会 有 许多 可 能 的 影响 。 


13.3 CUA) 修改 程序 13.4 以 额外 演 染 原始 环 面 。 也 束 是 说 ， 泻 
染 一 个 有 光照 的 环 面 〈 如 前 面 第 7 章 所 述 ) 和 向 外 线段 (使 用 几何 着 色 
a) ， 使 “头发 "看 起 来 像 是 从 环 面 中 出 来 的 。 


Rey 





13.4 【〔( 研 究 和 项 目 ) 修改 程序 13.4， 使 其 生成 具有 两 个 以 上 顶点 
的 癌 外 线段 ， 这 些 顶 点 排列 使 得 线段 看 起 来 略微 弯曲 。 
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mi4 FLAK 


在 本 章 中 ， 我 们 将 使 用 在 本 书 中 学 到 的 工具 来 探索 各 种 技术 。 有 些 
我 们 会 完全 讲解 ， 而 其 他 一 些 我 们 将 只 会 粗略 描述 。 图 形 编 程 是 一 个 巨 
大 的 领域 ， 本 章 绝 不 是 全 面 的 ， 而 是 介绍 了 多 年 来 友 展 的 一 些 创造 性 效 
A 
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14.1 
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E, KAZE ONE) ERMKEZANKKER L. REBUT, T 
气 中 都 会 有 一 定 程度 的 雾 猎 ， 我 们 已 经 习惯 于 看 到 它 ， 通 常 不 会 意识 到 
它 的 存在 ， 所 以 我 们 可 以 通过 引入 稚 来 增强 我 们 室外 场景 的 真实 感 


即使 只 是 少量 。 

















雾 也 可 以 增强 深度 感 。 近 处 物体 比 远 处 物体 具有 更 高 的 清晰 度 ， 对 
于 我 们 的 大 脑 是 可 以 用 来 破译 3D 场 景 的 地 形 结构 的 另 一 个 视觉 提示 。 





模拟 筋 的 方法 有 很 多 种 ， 从 非常 简单 的 模型 到 包含 光 散 里 效应 的 复 
杂 模 型 。 即 使 非常 简单 的 方法 也 是 有 效 的 。 有 一 种 方法 是 基于 物体 距 眼 
崩 的 距离 将 实际 像素 颜色 与 刃 一 种 颜色 〈“ 却 ” 的 颜色 通常 是 灰色 或 曰 灰 
色 一 一 也 用 于 背景 颜色 ) 混合 。 





图 14.1〈 见 彩 插 ) 说 明了 这 个 概念 。 眼 睛 《相机 ) 显示 在 左 侧 ， 两 
个 红色 物体 放置 在 视 锥 体 中 。 圆 柱 体 更 靠近 眼睛 ， 所 以 它 主 要 是 原始 闫 
E GAB); 立方 体 远离 眼睛 ， 所 以 它 主 要 是 盘 色 。 对 于 这 个 简单 的 实 
现 ， 几 乎 所 有 的 计算 都 可 以 在 片段 着 色 器 中 执行 。 


颜色 (几乎 ) 基于 对 象 颜色 


Bits OLY) 基于 雾 的 颜色 





图 14.1 3: 基于 距离 的 混合 





程序 14.1 显 示 了 一 个 非常 简单 的 私 算 法 的 相关 代码 ， 该 算法 按照 从 
相机 到 像素 的 距离 ， 使 用 从 对 象 颜 色 到 筋 颜色 的 线性 混合 。 有 具体 来 说 ， 
此 示例 将 筋 添 加 到 程序 10.4 中 的 高 度 贴 图 示例 。 





程序 14.1 简单 的 筋 生 成 





顶点 着 色 器 





out vec3 vertEyeSpacePos; 


// 在 视觉 空间 中 不 考虑 透视 计算 顶点 位 置 ， 并 将 它 发 送 给 片段 着 色 器 
// 变量 "p" 是 高 度 贴 图 后 的 顶点 ， 正 如 程序 16.4 中 所 述 
vertEyeSpacePos = (mv_matrix * p).xyz; 


片段 着 色 器 




















in vec3 vertEyeSpacePos; 
out vec4 fragColor; 


void main(void) 


{ vec4 fogColor = vec4(@.7, 0.8, 0.9, 1.0); 
float fogStart = 0.2; 
float fogEnd = 0.8; 








// 在 视觉 空间 中 从 摄像 机 到 顶点 的 距离 就 是 到 这 个 顶点 的 向 量 的 长 度 ， 因 为 摄像 机 在 视觉 
空间 中 的 (6,6,6) 位 置 

float dist = length(vertEyeSpace.xyz); 

float fogFactor = clamp(((fogEnd - dist) / (fogEnd - fogStart)), 0.0, 1. 
ð); 

fragColor = mix(fogColor, (texture(t,tc), fogFactor); 
} 





变量 fogColor 指 定 雾 的 颜色 。 变 量 fogStart 和 fogEnd 指 定 输出 颜色 从 
对 象 颜 色 过 渡 到 雾 色 的 范围 《在 视觉 空间 中 ) ， 并 且 可 以 调整 以 满足 场 
景 的 需要 。 在 对 象 颜色 中 混合 的 筋 的 百分比 在 变量 fogFactor 中 计算 ， 该 
变量 是 顶点 与 fogEnd 的 接近 程度 与 过 渡 区 域 的 总 长 度 之 比 。GLSL 的 
clamp0 〇 函数 用 于 将 此 比率 限制 在 值 0.0 和 1.0 之 间 。 然 后 ，GLSL 的 mix() 

函数 根据 fogFactor 的 值 返回 雾 颜色 和 对 象 颜 色 的 加 权 平 均值 。 图 
14.2 OLB) 展示 了 向 具有 高 度 贴图 地 形 的 场景 添加 雾 〈 下 016 的 岩石 
纹理 也 已 应 用 ) 。 














图 14.2” 雾 的 例子 


14.2 复合、 混合 、 透 明度 








我 们 已 经 看 到 了 一 些 混合 的 例子 ， 比 如 第 7 章 的 补充 说 明 以 及 我 们 
刚才 实现 的 筋 。 但 是 ， 我 们 还 没有 看 到 如 何在 像 系 操 作 期 间 利用 方 段 独 
色 器 之 后 的 混合 (或 合成 ) 功 能 (回想 一 下 图 2.2 所 示 的 管线 序列 )。 
透明 度 在 那个 步骤 被 处 理 ， 我 们 现在 来 了 解 一 下 








在 本 书 中 ， 我 们 经 党 使 用 vec4 数 据 类 型 来 表示 齐 次 坐标 系 中 的 3D 点 
和 向 量 。 您 可 能 已 经 注意 到 我 们 还 经 常 使 用 vec4 来 存储 颜色 信息 ， 其 中 
前 3 个 值 由 红色 、 绿 色 和 蓝 色 组 成 ， 那 么 第 四 个 元 素 是 什么 ? 








颜色 中 的 第 四 个 元 素 称 为 Alpha 通 道 ， 用 来 指定 颜色 的 不 透明 度 。 
不 透明 度 是 衡量 像 隶 颜色 不 透明 程度 的 指标 。Alpha 值 为 0 表示 “无 不 透 
明度 ?或 完全 透明 。Alpha 值 为 1 表示 “不 透明 上 度 满 值 ”， 也 就 是 完全 不 透 
明 。 在 茶 种 意义 上 ， 颜 色 的 “透明 度 ” 是 1-a， 其 中 a 是 Alpha 通 道 的 值 。 








回忆 一 下 第 2 草 ， 像 素 操 作 利 用 Z 缓 冲 区 ， 当 发 现 另 一 个 对 象 在 该 像 
素 的 位 置 更 近 时 ， 通 过 答 换 现 有 的 像素 颜色 来 实现 隐藏 面 消除 。 我 们 实 




















际 上 可 以 更 好 地 控制 这 个 过 程 混合 两 个 像素 。 
当 泻 染 一 个 像 系 时 ， 它 被 称 为 “ 源 ” 像 素 。 己 经 在 帧 缓冲 器 中 的 像素 


能 是 从 先前 的 对 象 泻 染 得 来 ) 被 称 为 “目标 ”像素 。OpenGL 提 供 了 
Mera 用 于 决定 最 终 将 两 个 像素 中 的 哪 一 个 或 者 它们 的 组 合 ， 放 置 
在 帧 缓冲 区 中 。 请 注意 ， 像 系 操 作 步 又 不 是 可 编程 阶段 一 一 因此 用 于 配 
置 所 需 合 成 的 OpenGL 工 具 可 在 C++ 应 用 程序 中 《而 不 是 在 着 色 器 中 ) 
找到 。 


用 于 控制 合成 的 两 个 OpenGEL 函 数 是 glBlendEquation(mode) 和 


glBlendFunc(srcFactor, destFactor)。 图 14.3 显 示 了 合成 过 程 的 概述 。 


KÄ C++/OpenGL 应 用 程序 
glBlendEquation() glBlendFunc() 


来 自 片段 着 色 器 的 [RGBA] 
原 像素 颜色 


新 目标 颜色 
目标 颜色 [RGBA] [RGBA] 





图 14.3 ”OpenGL 合 成 概述 


合成 过 程 的 工作 过 程 如 下 。 








(1) 源 像素 和 目标 像素 分 别 乘 以 源 因 子 和 目标 因子 。 源 和 目标 因 
子 在 blendFunc() 函 数 调 用 中 指定 。 


(2) 然后 使 用 指定 的 blendEquation 来 组 合 修改 后 的 源 像素 和 目标 
像素 以 生成 新 的 目标 颜色 。 混 合 方程 在 glBlendEquation0) 调 用 中 指定 。 


glBlendFunc() 参 数 的 常见 选项 〈( 即 srcFactor 和 destFactor) 如 表 14.1 
所 示 。 





表 14.1 glBlendFunc() 参 数 的 常见 选项 


glBlendFunc() 参 数 srcFactor 或 destFactor 的 结 





GL_ZERO (0,0,0,0) 





GL_SRC_COLOR 


GL_ONE_MINUS_SRC_COLOR 


GL_DST_COLOR 


GL_ONE_MINUS_DST_COLOR 


GL_SRC_ALPHA 


GL_ONE_MINUS_SRC_ALPHA 


GL_DST_ALPHA 


GL_ONE_MINUS_DST_ALPHA 


GL_CONSTANT_COLOR 


GL_ONE_MINUS_CONSTANT_COLOR 


GL_CONSTANT_ALPHA 


(1,1,1,1) 


(Rsro Gores Bore» Agro) 


(1,1,1,1)- (Rsro Gores Bsres Asra) 


(Gdesb Gdesb Badesb Adest) 


(1,1,1,1)- (RblendColor GblendColor BplendColor 


AplendColor) 


(Age Asro Asro Agro) 


ACACA 


src? src? src? src) 


(1, 1,1, 1)-(A 


(Adest Adest Adest Adest) 


G, ik il 1)-(Agest Adest Adest Adest) 


(Rblendcolor GplendColor BplendColor 


AplendColor) 


(= (RplendColor; GblendColor BblendColor 


AplendColor) 





(Ablendcolor Ablendcolon Ablendcolon 


AplendColor) 


(1,1,1,)- (AblendColor AblendColor AplendColor 


GL_ONE_MINUS_CONSTANT_ALPHA 
AplendColor) 


GL_ALPHA_SATURATE Cff 1)， 其 中 f= min(A,,. 1) 





那些 用 到 “blendColor”(GL_CONSTANT_COLOR 等 ) 的 选项 需要 
额外 调用 glBlendColor0 来 指定 将 用 于 计算 混合 函数 结果 的 常量 颜色 。 
有 一 些 其 他 混合 函数 未 在 表 14.1 中 显示 。 


glBlendEquation)22¢ Cater) 的 可 能 选项 如 表 14.2 所 示 。 


表 14.2 ”glBlendEquation() 参 数 的 可 能 选项 


GL_FUNC_ADD result=sourcepgpatdestinationpopa 


GL_FUNC_SUBTRACT result=SsourceRCBA-destinationRGBA 
GL_FUNC_REVERST_SUBTRACT reSult=destinationRCBA-SOUrCeRGBA 


result=min(sourcercpAa, destinationRcBA) 


result=max(sourcepcpa; destinationggga) 





glBlendFunc() 默 认 设 置 srcFactor 为 GL_ONE (1.0) ，destFactor 为 
GL_ZERO (0.0) 。glBlendEquation0 的 默认 值 为 GL_FUNC_ADD。 
此 ， 在 默认 情况 下 ， 源 像素 不 变 〈 乘 以 1) ， 目 标 像素 被 按 比 例 缩 小 到 
0， 并 且 两 者 相 加 意味 着 源 像素 变 为 帧 缓冲 区 的 颜色 。 


还 有 命令 glEnable(GL_BLEND) 和 glDisable(GL_BLEND)， 它 们 可 用 
告诉 OpenGL 应 用 指定 的 混合 ， 或 忽略 它 。 


我 们 不 会 在 这 里 说 明 所 有 选项 的 效果 ， 但 我 们 将 介绍 一 些 说 明 性 示 
例 。 假 设 我 们 在 C++/OpenGL 应 用 程序 中 指定 以 下 设置 : 


glBlendEquation(GL_FUNC_ADD) 
合成 将 如 下 进行 。 
(1) 源 像素 按 其 Alpha 值 缩放 。 
(2) 目标 像素 按 1-srcAlpha( 源 透明 度 ) 缩放 。 
(3) 像素 值 加 在 一 起 。 


例如 ， 如 果 源 像素 为 红色 ， 具 有 75% 不 透明 度 ， 即 [1,0,0,0.75]， 并 
且 目 标 像素 包含 完全 不 透明 的 绿色 ， 即 [0,10,1]， 则 结果 放 在 帧 缓冲 区 


将 是 : 


srcPixel * srcAlpha = [@.75, ©, ©, 0.5625] 


destPixel * (1-srcAlpha) = [@, 0.25, ©, 0.25] 
resulting pixel = [0.75, 0.25, ©, 0.8125] 





也 就 是 说 ， 主 要 是 红色 ， 有 些 是 绿色 的 ， 而 且 基本 上 是 实 色 。 这 个 
设置 的 总 体 效 果 是 让 目标 像 聚 以 与 源 像 素 的 透明 度 相 对 应 的 量 显示 。 在 
此 示例 中 ， 帧 缓冲 区 中 的 像素 为 绿色 ， oo 
〈 不 透明度 为 75%) 。 因 此 允许 一 些 绿色 通过 红色 显示 。 











事实 证 明 ， 混 合 函 数 和 混合 方程 的 这 些 设 置 在 许多 情况 下 都 能 很 好 
地 工作 。 我 们 将 它们 应 用 到 包含 两 个 3D 模 型 的 场景 中 的 实际 示例 中 
E: 一 个 环 面 和 环 面前 的 金字 塔 。 图 14.4 显 示 了 这 样 一 个 场景 ， 左 边 是 
一 个 不 透明 的 金字 塔 ， 右 边 是 金字 塔 的 Alpha 值 设置 为 0.8。 光 照 已 经 添 
加 。 





对 于 许多 应 用 一 一 例如 创建 平面 “窗口 ?作为 房屋 模型 的 一 部 分 ， 这 
种 简单 的 透明 度 实现 可 能 就 足够 了 。 但 是 ， 在 图 14.4 所 示 的 示例 中 ， 存 
在 相当 明显 的 不 足 之 处 。 尽 管 金字 塔 模 型 现在 实际 上 是 透明 的 ， 但 实际 
透明 的 金字 塔 不 仅 应 该 显示 其 背后 的 对 象 ， 还 应 该 显示 其 自身 的 背面 。 











图 14.4 ”金字塔 的 Alpha= 1.0 (Æ) , Alpha=0.8 (4) 





实际 上 ， 人 金字 塔 的 背面 没有 出 现 的 原因 是 因为 我 们 局 用 了 背面 易 


除 。 一 个 合理 的 想法 可 能 是 在 绘制 金字 塔 时 蔡 用 背面 剔除 。 但 是 ， 这 通 
常会 产生 其 他 伪 影 ， 如 图 14.5 左 图 所 示 。 简 单 地 蔡 用 背面 掏 除 的 问题 在 
于 混合 的 效果 取决 于 泻 染 表面 的 顺序 因为 这 决定 了 源 像 素 和 目标 像 

素 ) ， 并 且 我 们 不 总 是 能 够 控制 泻 染 顺序 。 通 常 有 利 的 是 首先 演 染 不 透 
明 对 象 ， 以 及 在 后 面 的 对 象 〈 例 如 环 面 ) ， 最 后 再 泻 染 透明 对 象 。 这 也 
适用 于 金字 塔 的 表面 ， 并 且 在 这 种 情况 下 ， 包 括 金 字 塔 砌 部 的 两 个 三 角 
形 看 起 来 不 同 的 原因 是 它们 中 的 一 个 在 金字 塔 的 前 面 之 前 被 演 染 而 一 个 
在 之 后 被 泻 染 。 诸 如 此 类 的 伪 影 有 时 被 称 为 “ 顺 友 ” 伪 影 ， 并 且 它 们 可 以 
在 透明 模型 中 显示 ， 因 为 我 们 不 总 是 能 预测 其 三 角形 将 被 泻 染 的 顺序 。 

















我 们 可 以 通过 从 背面 开始 分 别 泻 染 正面 和 背面 来 解决 金字 塔 示 例 中 
的 问题 。 程 序 14.2 显 示 了 执行 此 操作 的 代码 。 我 们 通过 统一 变量 来 指定 
金字 塔 的 Alpha 值 并 传递 给 着 色 吉 程序 ， 然 后 通过 将 指定 的 Alpha 蔡 换 为 
计算 的 输出 颜色 将 其 应 用 于 请 段 着 色 器 中 。 


为 请 注意 ， 要 使 光照 正常 工作 ， 我 们 必须 在 渔 染 背面 时 翻转 法 向 
量 。 我 们 通过 向 顶点 着 色 串 发 送 一 个 标志 来 完成 此 操作 ， 然 后 我 们 在 其 
中 翻转 法 同 量 。 




















程序 14.2 ”透明 度 的 两 所 混合 

















C++ / OpenGL 应 用 程序 一 在 泻 染 金字 塔 的 display() 函 数 中 : 








glEnable(GL CULL_FACE); 


glEnable(GL BLEND); // 配置 混合 设置 
glBlendFunc(GL_SRC_ALPHA, GL ONE MINUS_ SRC ALPHA); 
glBlendEquation(GL_FUNC_ADD) ; 











glCullFace(GL_FRONT); // 先 泻 染 金字 塔 的 背面 
glProgramUniformif(renderingProgram, aLoc, 0.3f); 
ee ie Sore ENS BS EVER On ESM fLoc, -1.0f); 














all 





人 TRIANGLES，6，numPyramidVertices); 
glcullFace(GL_BACK) ; 

的 正面 

glProgramUniformif(renderingProgram, aLoc, 0.7Ff); 
glProgramUniformif(renderingProgram, floc, 1.0f); 
法 向 量 
glDrawArrays(GL_TRIANGLES, ©, numPyramidVertices) ; 





glDisable(GL_BLEND) ; 


顶点 着 色 器 : 





if (flipNormal < 6) varyingNormal = -varyingNormal; 


片段 着 色 器 ; 





fragColor = globalAmbient * material.ambient + ... 
ng 光照 一 样 

fragColor = vec4(fragColor.xyz, alpha); 

中 发 送 的 Alpha 值 替换 


etc. 


这 种 “两 裔 ”解决 方案 的 结果 如 图 14.5 右 图 所 示 。 


背面 非常 透明 
// 翻转 背面 的 法 向 





// 然后 泻 染 金字 


// 正面 略微 透明 
// 正面 不 需要 翻转 


// 和 Blinn-Pho 





// 使 用 统一 变量 








图 14.5 “透明度 和 背面 : HFA E) MKWE A) 











虽然 它 在 这 里 运行 良好 ， 但 程序 14.2 中 显示 的 两 遍 解决 方案 并 不 总 





是 足够 的 。 例 如 ， 一 些 更 复杂 的 模型 可 能 具有 面向 前 方 的 隐藏 表面 ， 并 
上 且 如 果 这 样 的 对 象 变 得 透明 ， 我 们 的 算法 将 无 法 浑 染 模型 的 那些 隐藏 的 
前 向 部 分 。Alec Jacobson 描 述 了 一 个 适用 于 大 量 案例 的 五 遍 序列 DA121。 


14.3 AP EXI R F Tel 
OpenGL 不 仅 可 以 应 用 于 视 锥 体 ， 还 包括 了 指定 前 裁 平 面 的 功能 


用 户 定 义 的 盘 裁 平面 的 一 个 用 途 是 对 模型 切片 。 这 样 就 可 以 通过 从 简单 
的 模型 开始 并 从 中 切片 来 创建 复杂 的 形状 。 





甬 裁 平面 使 用 平面 的 标准 数学 定义 来 定义 : 


ax + by+cz+d=0 





其 中 a、b、c 和 qd 是 用 来 定义 有 X、Y 和 2Z 轴 的 3D 空 间 中 特定 平面 的 参数 。 
参数 表示 垂直 于 平面 的 向 量 (qa,b,c)， 以 及 从 原点 到 平面 的 距离 dq。 可 以 使 
用 vec4 在 顶点 着 色 器 中 指定 这 样 的 平面 ， 如 下 所 示 : 














vec4 clip plane = vec4 (0.0,0.0, -1.0,0.2) ; 





这 对 应 于 平面 : 
(0.0) x + (0.0) y + (-1.0) z+ 0.2 =0 


然后 ， 通 过 使 用 内 置 的 GLSL 变 量 g]_ClipDistance[ ]， 可 以 在 顶点 着 
色 器 中 实现 裁 前 ， 如 下 例 所 示 : 


gl_ClipDistance [0] = dot(clip_plane.xyz, vertPos) + clip_plane.w; 


在 此 示例 中 ，vertPos 指 的 是 在 顶点 属性 (例如 来 自 YBO〉 中 进入 顶 
点 着 色 器 的 顶点 位 置 ，clip_plane 定 义 如 上 。 然 后 我 们 计算 从 裁剪 平面 到 
传 入 顶点 的 带 符 号 距离 〈 如 第 3 章 所 示 ) ， 如 果 顶 点 在 平面 上 ， 则 为 0， 
或 者 取决 于 顶点 在 平面 的 哪 一 侧 而 为 负 或 正 。gl_ClipDistance 数 组 的 下 
标 允 许 定义 多 个 裁 甬 距离 〈 即 多 个 平面 ) 。 可 以 定义 的 最 大 用 户 裁剪 平 
面 数量 取决 于 图 形 卡 的 OpenGL 实 现 。 


然后 必须 在 C++/OpenGL 应 用 程序 中 局 用 用 户 定 义 的 裁 区 。 内 置 
OpenGL 标 识 符 GL_CLIP_DISTANCE0、GL_CLIP_DISTANCE1 等 ， 对 
应 于 每 个 gL_ClipDistance[ ] 数 组 元 素 。 例 如 ， 启 用 第 0 个 用 户 定义 剪裁 平 
面 ， 如 下 所 示 。 


将 前 面 的 步 又 应 用 到 我 们 的 发 光环 面 会 产生 如 图 14.6 所 示 的 输出 ， 
其 中 环 面 的 前 半 部 分 已 经 被 剪裁 了 《还 应 用 了 旋转 以 提供 更 清晰 的 视 
图 ) 。 








可 能 看 起 来 好 像 环 面 的 底部 也 被 修 盘 了， 但 这 是 因为 环 面 的 内 表面 
没有 被 泻 染 。 当 裁 攀 会 显示 形状 的 内 部 表面 时 ， 也 就 需要 泻 染 它 们 ， 天 
则 模型 将 显示 得 不 完整 (如 图 14.6 所 示 〉。 











图 14.6 ”剪裁 一 个 环 面 





演 染 内 表面 需要 再 次 调用 gL_DrawArrays0， 并 颠倒 缠绕 顺序 。 此 
Sh, FABRE ASAE, Wee HEA Se COLE aa Ara 
C++ 应 用 程序 和 顶点 着 色 器 的 相关 修改 如 程序 14.3 所 示 ， 输 出 如 图 14.7 
ARAN o 














程序 14.3” 带 背面 的 剪裁 








C++ / 0penGL 应 用 程序 : 








void display(GLFWwindow* window, double currentTime) { 
flipLoc = glGetUniformLocation(renderingProgram, "flipNormal") ; 


glEnable(GL_CLIP_DISTANCE@); 


// 正常 绘制 外 表面 
glUniform1i(flipLoc, @); 

glFrontFace(GL_CCw) ; 

glDrawElements(GL_TRIANGLES, numTorusIndices, GL_UNSIGNED_INT, @); 











// 泻 染 背 面 ， 法 向 量 反 转 

glUniform1i(flipLoc, 1); 

glFrontFace(GL_Cw) ; 

glDrawElements(GL_TRIANGLES, numTorusIndices, GL_UNSIGNED_INT, 0); 
} 


顶点 着 色 器 : 








vec4 clip plane = vec4(@.0, 0.0, -1.0, 9.5); 
uniform int flipNormal; // 反 转 法 向 量 的 标志 














void main(void) 
if (flipNormal==1) varyingNormal = -varyingNormal; 


gl_ClipDistance[@] = dot(clip_plane.xyz, vertPos) - clip _plane.w; 


} 





14.4 3D 纹 理 





2D 纹 理 包 含 由 两 个 变量 索引 的 图 像 数 据 ， 而 3D 纹 理 包 含 相同 类 型 
的 图 像 数 据 ， 但 是 处 在 由 3 个 变量 索引 的 3D 结 构 中 。 前 两 个 维度 仍然 代 
表 纹 理 贴 独 中 的 宽度 和 高 度 ， 第 三 个 维度 代表 深度 。 





为 3D 纹 理 中 的 数据 以 与 2D 纹 理 类 似 的 方式 存储 ， 所 以 很 容易 将 
3D 纹 理 视 为 一 种 3D“ 图 像 ”。 但 是 ， 我 们 通常 不 将 3D 纹 理 源 数据 称 为 3D 
图 像 ， 因 为 对 于 这 种 结构 没有 御用 的 图 像 文件 格式 〈 即 没有 类 似 的 3D 
版 JPEG， 至 少 没有 真正 三 维 的 图 像 ) 。 相 反 ， 我 们 建议 将 3D 纹 理 视 为 
一 种 物质 ， 我 们 将 其 浸没 〈 或 “浸入 ”) 被 纹理 化 的 对 象 ， 从 而 使 对 象 的 
表面 点 从 纹理 中 的 相应 位 置 获得 颜色 。 或 者 可 以 想象 这 个 物体 被 从 3D 








DUBE NT TS PR? P REAPER, ARR AE eA — ST FI AEA EA H — 
个 人 物 一 样 。 





OpenGL 文 持 3D 纹 理 对 象 。 为 了 使 用 它们 ， 我 们 需要 学 习 如 何 构建 
3D 纹 理 以 及 如 何 使 用 它 来 纹理 化 对 象 。 





与 可 以 从 标准 图 像 文件 构建 的 2D 纹 理 不 同 ，3D 纹 理 通常 是 在 程序 
上 生成 的 。 正 如 之 前 对 2D 纹 理 所 做 的 那样 ， 我 们 诀 定 分 辨 率 ， 即 每 个 
维度 中 的 纹 素 数量 。 根 据 纹理 中 的 颜色 ， 我 们 可 以 构建 包含 这 些 颜 色 的 
三 维 数组 。 如 果 纹 理 包含 可 以 与 各 种 颜色 一 起 使 用 的 “图 案 ”， 我 们 可 能 
会 建立 一 个 保存 图 案 的 数组 ， 例 如 0 和 1。 














例如 ， 我 们 可 以 通过 填充 对 应 于 所 需 条 纹 图 案 的 0 和 1 的 数组 来 构建 
表示 水 平 条 纹 的 3D 纹 理 。 假 设 纹理 的 所 需 分 辨 率 是 200x200x200 纹 素 ， 
并 且 纹 理由 交 蔡 的 条 纹 组 成 ， 每 个 条 纹 高 10 纹 素 。 通 过 在 藤 套 循环 中 使 
用 适当 的 0 和 1 填充 数组 来 构建 此 类 结构 的 简单 函数 〈 假 设 在 这 种 情况 
下 ， 宽 度 、 高 度 和 深度 变量 均 设 置 为 200) 将 如 下 所 示 。 








void generate3Dpattern() { 
for (int x=@; x<texWidth; x++) { 
for (int y=0; y<texHeight; y++) { 
for (int z=@; z<texDepth; z++) { 
if ((y/10) % 2 == @) 
tex3Dpattern[x][y][z] = 0.9; 


else 
tex3Dpattern[x][y][z] = 1.9; 





存储 在 texz3Dpattern 数 组 中 的 图 案 如 图 14.8 所 示 “〈 见 彩 插 ) » OS 
色 ，1 明 黄色 。 





图 14.8 ”条 纹 3D 纹 理 图 案 


使 用 条 纹 图 案 对 对 象 进行 纹理 处 理 ， 如 图 14.8 所 示 ， 需 要 执行 以 下 


IR o 


St 


C1) 生成 如 上 所 示 的 图 案 。 


(2) 使 用 图 案 填 充 所 需 磊 色 的 字 市 数组 。 


(3) 将 字 节 数组 加 载 到 纹理 对 象 中 。 


(4) 确定 对 象 顶点 的 适当 3D 纹 理 坐 标 。 


(5) 在 片段 着 色 器 中 使 用 适当 的 采样 器 来 纹理 化 对 象 。 


3D 纹 理 的 纹理 坐标 范围 为 [0...1] ， 与 2D 纹 理 的 方式 相同 。 





ARIE, AER (4) 《确定 3D 纹 理 坐 标 ) 通常 比 最 初 怀疑 的 要 简 
单 得 多 。 事 实 上 ， 它 通常 比 2D 纹 理 更 简单 ! 这 是 因为 (在 2D 纹 理 的 情 
况 下 ) 3D 对 象 被 2D 图 像 纹理 化 ， 我 们 需要 决定 如 何 “ 展 平 ?3D 对 象 的 顶 
点 《例如 通过 UV 映射 来 创建 纹理 坐标 。 但 是 当 3D 纹 理化 时 ， 对 象 和 
纹理 都 具有 相同 的 维度 。 在 大 多 数 情况 下 ， 我 们 希望 对 象 反 映 纹理 图 
K. MAERA HORE CBR AFH). MAAMEES H ie 
纹理 坐标 ! 通常 所 需 的 只 是 应 用 一 些 简单 的 缩放 以 确保 对 象 的 顶点 的 位 
置 坐标 映射 到 3D 纹 理 坐 标的 范围 [0, 1]。 








由 于 我 们 通过 程序 来 生成 3D 纹 理 ， 所 以 我 们 需要 一 种 从 生成 的 数 
据 中 构造 OpenGL 纹 理 贴图 的 方法 。 将 数据 加 载 到 纹理 中 的 过 程 与 我 们 
之 前 在 第 5.12 节 中 看 到 的 类 似 。 在 这 种 情况 下 ， 我 们 用 颜色 值 填 充 3D 数 
组 ， 然 后 将 它们 复制 到 纹理 对 象 中 。 








程序 14.4 展 示 出 了 用 于 实现 所 有 先前 步骤 的 各 种 组 件 ， 以 便 使 用 程 
序 构建 的 3D 纹 理 来 纹理 化 具有 蓝 色 和 黄色 水 平 条 纹 的 对 象 。 所 需 的 网 
案 在 generate3Dpattern(O) 函 数 中 构建 ， 该 函数 将 网 案 存储 在 名 
为 “tex3Dpattern” 的 数组 中 。 然 后 在 函数 们 1DataArray0 中 构建 “图 像 ” 数 
据 ， 按 照 图 案 ， 该 函数 使 用 与 RGB 颜色 R、G、B 和 A 相 对 应 的 字 节 数据 
填充 3D 数 组 ， 每 个 数据 在 [0, 255] 范 围 内 。 然 后 将 这 些 值 复制 到 
load3DTexture0O 函 数 中 的 纹理 对 象 中 。 








程序 14.4 3D 纹 理 : 条 纹 图 案 











C++ / OpenGL 应 用 程序 : 





const int texHeight= 200; 
const int texWidth = 200; 
const int texDepth = 200; 


double tex3Dpattern[texWidth ][texHeight ] [texDepth ] ; 








// 按照 由 generate3Dpattern() 构 建 的 图 案 ， 用 蓝 色 、 黄 色 的 RGB 值 来 填充 字 节 数组 











void fillDataArray(GLubyte data[ ]) { 
for (int i=@; i<texWidth; i++) { 
for (int j=0; j<texHeight; j++) { 
for (int k=@; k<texDepth; k++) { 
if (tex3Dpattern[i][j][k] == 1.0) 
// 黄色 
data[i*(texWidth*texHeight*4) + 
te) 255; // red 
data[i*(texWidth*texHeight*4) + 
te) 255; // green 
data[i*(texwWidth*texHeight*4) + 
te) ð; // blue 
data[i*(texWidth*texHeight*4) + 
te) 255; // alpha 
} 
else { 
// WE 
data[i*(texWidth*texHeight*4) + 
te) 6j // red 
data[i*(texWidth*texHeight*4) + 
te) ð; // green 
data[i*(texWidth*texHeight*4) + 
te) 255; // blue 
data[i*(texwWidth*texHeight*4) + 
te) 255; // alpha 
}}}}} 
// 构建 条 纹 的 3D 图 案 
void generate3Dpattern() { 
for (int x=@; x<texWidth; x++) { 
for (int y=0; y<texHeight; y++) { 
for (int z=@; z<texDepth; z++) { 
if ((y/10)%2 == ©) 








tex3Dpattern[x][y][z] = 9.9; 
else 
tex3Dpattern[x][y][z] = 1.9; 


}}}} 
// 将 顺序 字 节 数据 数组 加 载 进 纹理 对 象 
int load3DTexture() { 

GLuint textureID; 




















j 


{ 

j*(texHeight*4)+ 
j*(texHeight*4)+ 
j*(texHeight*4)+ 


j*(texHeight*4)+ 


j*(texHeight*4)+ 
j*(texHeight*4)+ 
j*(texHeight*4)+ 


j*(texHeight*4)+ 


k*4+0 ] 
k*4+1 | 
k*4+2 | 


k*4+3 | 


k*4+0 | 
k*4+1] 
k*4+2 | 


k*4+3 | 


GLubyte* data = new GLubyte[texWidth*texHeight*texDepth*4] ; 


(GLuby 
(GLuby 
(GLuby 


(GLuby 


(GLuby 
(GLuby 
(GLuby 


(GLuby 


fillDataArray(data) ; 


glGenTextures(1, &textureID) ; 
glBindTexture(GL_TEXTURE_3D, textureID); 
glTexParameteri(GL_TEXTURE_3D, GL_TEXTURE_MIN_FILTE 


R, GL_LINEAR); 


glTexStorage3D(GL_TEXTURE_3D, 1, GL_RGBA8, texWidth, texHeight, texDepth 


)3 


glTexSubImage3D(GL_TEXTURE_3D, ©, ©, ©, ©, texWidth, texHeight, texDepth 


return textureID; 


} 


void init(GLFWwindow* window) { 


























generate3Dpattern(); // 3D 图 案 和 纹理 只 加 载 一 次 ， 所 以 在 in 
it() 里 作 
stripeTexture = load3DTexture(); // 为 3D 纹 理 保 存 整 型 图 案 ID 
} 
void display(GLFWwindow* window, double currentTime) { 
glActiveTexture(GL TEXTUREQ); 
glBindTexture(GL TEXTURE 3D, stripeTexture); 
glDrawArrays(GL_TRIANGLES, ©, numObjVertices) ; 
} 
顶点 着 色 器 
out vec3 originalPosition; // 原始 模型 顶点 将 被 用 于 纹理 坐标 


layout (binding=6) uniform sampler3D s; 


void main(void) 
































{ originalPosition = position; // 将 原始 模型 4 
gl Position = proj matrix * mv_matrix * vec4(positi 


} 
片段 着 色 器 





标 传 递 ， 用 作 3D 纹 到 


坐标 





on,1.@); 




















in vec3 originalPosition; // 接受 原始 模型 坐标 ， 
out vec4 fragColor; 


layout (binding=@) uniform sampler3D s; 


void main(void) 

















] 作 3D 纹 理 坐 标 





{ 

fragColor = texture(s, originalPosition/2.0 + 0.5); // 顶点 范围 为 [-1,+1] 
， 纹 理 坐 标 范围 为 [8,1] 
} 











fEC++/OpenGL VA #eFe#, load3Dtexture() K BCA RAY Be a 
到 3D 纹 理 中 。 它 不 使 用 SOIL2 来 加 载 纹理 ， 而 是 直接 进行 相关 的 
OpenGL 调 用 ， 其 方式 类 似 于 前 面 5.12 节 中 所 述 的 方式 。 图 像 数 据 应 该 
被 格式 化 为 对 应 于 RGBA 闫 色 分 量 的 字 节 序列 。 函 数 f 们 1DataArray() 执 行 
此 操作 ， 应 用 黄色 和 蓝 色 的 RGB 值 ， 依 据 由 generate3Dpattern() 函 数 构建 
并 保存 在 tex3Dpattern 数 组 中 的 条 带 图 案 。 另 请 注意 display0 函 数 中 指定 
了 纹理 类 型 GL_TEXTURE_3D。 





由 于 我 们 希望 将 对 象 的 项 点 位 置 用 作 纹 理 坐 标 ， 我 们 将 它们 从 顶点 
着 色 器 传递 到 片段 着 色 器 。 片 段 着 色 器 缩放 它们 ， 以 便 它们 按照 纹理 坐 
标的 标准 ， 被 映射 到 范围 [0, 1]。 最 后 ， 通 过 sampler3D 统 一 变量 访问 3D 
纹理 ， 该 统一 变量 采用 3 个 参数 而 不 是 两 个 参数 。 我 们 使 用 顶点 的 原始 
X、Y 和 2 坐标 ， 缩 放 到 正确 的 范围 ， 以 访问 纹理 。 结 末 如 图 14.9 所 示 
〈 见 彩 插 ) 。 





图 14.9 3D 条 纹 纹理 的 龙 对 象 

















ict (eX generate3Dpattern() A) JÆ AE SARA ASS. 14.1050 aN 
了 将 条 市 图 案 转 换 为 3D 棋 盘 的 简单 更 改 ， 产 生 的 效果 如 图 14.11 所 示 。 
值得 注意 的 是 ， 如 果 龙 的 表面 采用 2D 棋 盘 纹 理 图 案 进行 纹理 处 理 ， 效 
果 与 情况 则 大 不 相同 。 (见习 题 14.3。) 
void generate3Dpattern 
for (int x=0; x<texWidth; x++) 
{ for (int y=0; y<texHeight; y++) 
{ for (int z=0; z<texDepth; z++) 
{ 
tex3Dpattern[x][y][Z] = 0.0; 
tex3Dpattern[x][y][z] = 1.0; 
图 14.10 ”生成 棋盘 3D 纹 理 图 案 
图 14.11 3D 棋 盘 纹 理 的 龙 
14.5 噪声 


可 以 使 用 随机 性 或 噪声 来 模拟 许多 自然 现象 。 一 种 常见 的 技术 是 
Perlin = [PE85], Eb) Ken Perlin 命 名 。Ken Perlin 在 1997 年 因 开 发 生成 和 








使 用 2D 和 3D 品 声 的 实用 方法 而 获得 奥斯卡 奖 。 叫 这 里 描述 的 程序 基于 
Perlin 的 方法 。 





图 形 场景 中 存在 许多 噪声 应 用 。 一 些 常见 的 例子 是 云 、 地 形 、 木 
纹 、 矿 产 《〈 如 大 理 石 中 的 矿脉 ) 、 烟 雾 、 燃 烧 、 火 焰 、 行 星 表 面 和 随机 
运动 。 在 本 节 中 ， 我 们 将 重点 关注 生成 包含 噪声 的 3D 纹 理 ， 然 后 使 用 
噪声 数据 生成 复杂 材质 (如 大 理 石 和 木材 ， 并 模拟 动画 云 纹理 以 用 于 
立方 体贴 图 或 天 幕 。 包 含 噪 声 的 空间 数据 〈 例 如 2D 或 3D) 的 集合 有 时 
被 称 为 噪声 图 。 








我 们 首先 从 随机 数据 中 构建 3D 纹 理 贴图 。 这 可 以 使 用 上 一 节 中 显 
示 的 函数 完成 ， 只 需 进 行 一 些 修改 。 首 先 ， 我 们 使 用 以 下 更 简单 的 
generateNoise() K 2 4 fe te 14.4" #9 generate3Dpattern() RA ži: 


#include <random>; 


double noise[noiseWidth ] [noiseHeight ][noiseDepth] ; 


void generateNoise() { 
for (int x=@; x<noiseWidth; x++) { 
for (int y=0; y<noiseHeight; y++) { 
for (int z=@; z<noiseDepth; z++) { 
noise[x][y][z] = (double) rand() / (RAND MAX + 1.0); 
// 计算 出 [6...1] 范 围 内 的 








// 一 个 double 类 型 数值 
}}}} 





接 下 来 ， 修 改 程序 14.4 中 的 flDataArray0O 函 数 ， 以 便 将 噪声 数据 复 
制 到 字 节 数组 中 ， 以 便 加 载 到 纹理 对 象 中 ， 如 下 所 示 。 





void fillDataArray(GLubyte data[ ]) { 
for (int i=@; i<noiseWidth; i++) { 


for (int j=0; j<noiseHeight; j++) { 
for (int k=@; k<noiseDepth; k++) { 
data[i*(noiseWidth*noiseHeight*4)+j*(noiseHeight*4)+k*4+ 


6] = 
(GLubyte) (noise[i][j][k] * 255); 
data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+ 
1] = 
(GLubyte) (noise[i][j][k] * 255); 
data[i* (noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+ 
2] = 
(GLubyte) (noise[i][j][k] * 255); 
data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+ 
3] = 
(GLubyte) 255; 
} }}} 





程序 14.4 的 其 余部 分 ， 用 于 将 数据 加 载 到 纹理 对 象 并 将 其 应 用 于 模 
型 ， 依 然 保 持 不 变 。 我 们 可 以 通过 将 它 应 用 于 我 们 的 简单 立方 体 模型 来 
查看 这 个 3D 噪 声 图 ， 如 图 14.12 所 示 。 在 此 示例 中 ，noiseHeight = 
noiseWidth = noiseDepth = 256. 








图 14.12 ”3D 噪 声 数据 纹理 的 立方 体 








这 是 一 个 3D 品 声 图 ， 虽 然 它 不 是 非常 有 用 《因为 它 太 哮 杂 了 了， 很 
难 有 很 多 实际 应 用 ) 。 为 了 制作 更 实用 、 更 可 调 的 噪声 模式 ， 我 们 将 使 








FAAS EHNE AE ae B fill Data A rray() A. 


假设 我 们 使 用 整数 除法 作为 索引 ， 通 过 “放大 ”， 填 充 数据 数组 到 图 
14.12 所 示 的 噪声 图 的 一 小 部 分 。 对 fl]DataArray0O 函 数 的 修改 如 下 所 
示 。 根 据 用 于 除法 索引 的 “缩放 ?因子 ， 可 以 使 得 到 的 3D 纹 理 更 多 或 少 地 
呈现 “ 块 状 "。 在 图 14.13 中 ， 纹 理 显示 了 放大 的 结果 ， 将 索引 分 别 除 以 缩 
放 因 子 8、16 和 32 〈 从 左 到 右 ) 。 











图 14.13 不同 “缩放 ?因子 的 “ 块 状 "3D 噪 声 图 








void fillDataArray(GLubyte data[ ]) { 
int zoom = 8; // 缩放 因子 
for (int i=@; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=@; k<noiseDepth; k++) { 
data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+0 


(GLubyte) (noise [i/zoom] [j/zoom] [k/zoom] * 255) 
data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+1 
(GLubyte) (noise [i/zoom] [j/zoom] [k/zoom] * 255) 
data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+2 
(GLubyte) (noise [i/zoom] [j/zoom] [k/zoom] * 255) 


data[i* (noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+3 


GLubyte) 255; 


we eo 
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过 从 每 个 离散 灰 度 颜色 值 插值 到 下 一 个 灰 度 颜色 值 ， 我 们 可 以 平 
滑 特定 的 噪声 图 内 的 “ 块 效应 ”。 也 就 是 说 ， 对 于 给 定 3D 纹 理 内 的 每 个 
小 “ 块 ”， 我 们 通过 从 其 颜色 到 其 相 邻 块 的 颜色 进行 插值 来 设置 块 内 的 每 
个 纹 素 的 颜色 。 插 值 代码 在 下 面 所 示 的 函数 smoothNoise0) 中 ， 还 有 修改 
后 的 flDataArray0 函 数 。 图 14.14 所 示 的 是 得 到 的 “平滑 ”纹理 〈 分 别 是 缩 
放 因 子 2、4、8、16、32 和 64 一 一 从 左 到 右 ， 从 上 到 下 〉 . YER, FA 
放 因 子 现在 是 一 个 double 类 型 量 ， 因 为 我 们 需要 小 数 分 量 来 确定 每 个 纹 
素 的 插值 灰 度 值 。 








void fillDataArray(GLubyte data[ ]) { 
double zoom = 32.0; 
for (int i=@; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=@; k<noiseDepth; k++) { 
data[i*(noiseWidth*noiseHeight*4) + j*(noiseHeight*4) + k 


* = 

ve (GLubyte) (smoothNoise(i/zoom, j/zoom, k/zoom) * 2 
a data[i*(noiseWidth*noiseHeight*4) + j*(noiseHeight*4) + k 
* = 

ete (GLubyte) (smoothNoise(i/zoom, j/zoom, k/zoom) * 2 
a data[i*(noiseWidth*noiseHeight*4) + j*(noiseHeight*4) + k 
* = 

ve (GLubyte) (smoothNoise(i/zoom, j/zoom, k/zoom) * 2 
55); 


data[i*(noiseWidth*noiseHeight*4) + j*(noiseHeight*4) + k 
*4 +3] = (GLubyte) 255; 
} }}} 


double smoothNoise(double x1, double y1, double z1) { 
// xl1、y1 和 z1 的 小 数 部 分 〈 对 于 当前 纹 素 ， 从 当前 块 到 下 一 个 块 的 百分比 ) 
double fractX = x1 - (int) x1; 
double fractY = y1 - (int) y1; 
double fractZ = z1 - (int) z1; 








// 在 X、Y 和 Z 方 向 上 的 相 邻 像素 的 索引 

int x2 = ((int)x1 + noiseWidth + 1) % noiseWidth; 
int y2 = ((int)y1 + noiseHeight + 1) % noiseHeight; 
int z2 ((int)z1 + noiseDepth + 1) % noiseDepth; 


// 通过 按照 3 个 轴 方 向 插值 灰 度 ， 平 滑 噪 声 
double value = 6.0; 
value += (1-fractX) * (1-fractY) * (1-fractZ) * noise[(int)x1][(int) 


y1][(int)z1]; 

value += (1-fractX) * fractY * (1-fractZ) * noise[(int)x1][ (int) 
y2][(int)z1]; 

value += fractX * (1-fractY) * (1-fractZ) * noise[(int)x2][ (int) 
y1][(int)z1]; 

value += fractX * fracty * (1-fractZ) * noise[(int)x2][ (int) 
y2][(int)z1]; 

value += (1-fractX) * (1-fractY) * fractZ * noise[ (int)x1][ (int) 
y1][(int)z2]; 

value += (1-fractX) * fractY * fractZ * noise[ (int)x1][ (int) 
y2][(int)z2]; 

value += fractX * (1-fractY) * fractZ * noise[(int)x2][ (int) 
y1][(int)z2]; 

value += fractX * fracty * fractZ * noise[ (int)x2][ (int) 
y2][(int)z2]; 


return value; 


} 








图 14.14 ”在 各 种 缩放 级 别 平 滑 3D 纹 理 


smoothNoise0O) 函 数 通 过 计算 相应 原始 “ 抉 状 ?噪声 图 中 纹 素 周 围 的 8 








个 灰 度 值 的 加 权 平 均值 来 计算 给 定 噪声 图 的 平滑 版 本 中 的 每 个 纹 素 的 灰 
度 值 。 也 就 是 说 ， 它 平均 纹 素 所 在 的 小 “ 块 * 的 8 个 顶点 处 的 颜色 值 。 这 
些 “ 邻 大” 颜色 中 的 每 一 个 的 权重 基于 纹 素 与 其 每 个 邻居 的 距离 ， 并 归 一 
化 到 范围 [0...1]。 








接 下 来 ， 组 合 各 种 缩放 因子 的 平滑 噪声 图 。 创 建 一 个 新 的 噪声 图 ， 
其 中 每 个 纹 素 由 男 一 个 加 权 平 均值 形成 ， 这 次 基于 每 个 “平滑 ”噪声 图 中 
相同 位 置 的 纹 素 的 总 和 ， 其 中 缩放 因子 用 作 权重 。 这 种 效应 被 Perlin 
[PE85] 称 为 “ 满 流 ?， 尽 管 它 与 通过 求 和 各 种 波形 产生 的 谐 波 实际 上 更 为 密 
切 相 关 。 新 的 turbulence0O 函 数 和 fillDataArray0O 的 修改 版 本 指定 了 一 个 噪 
声 图 ， 该 图 对 缩放 级 别 1 一 32〈2 的 各 次 蜂 ) 进行 求 和 ， 如 下 所 示 。 其 中 
还 显示 了 以 此 产生 的 噪声 图 在 立方 体 上 贴图 的 结果 。 











double turbulence(double x, double y, double z, double maxZoom) { 
double sum = @.@, zoom = maxZoom; 
while (zoom >= 1.0) { // 最 后 一 遍 是 当 zoom = 1 时 
// 计算 平滑 后 的 噪声 图 的 加 权 和 


sum = sum + smoothNoise(x / zoom, y / zoom, z / zoom) * zoom; 








zoom = zoom / 2.0; // 对 每 个 2 的 贤 的 缩放 因子 
sum = 128.0 * sum / maxZoom; // 对 不 大 于 64 的 maxZoom 值 ， 保 证 RGB 
< 256 
return sum; 
} 


void fillDataArray(GLubyte data[ ] ) { 
double maxZoom = 32.0; 
for (int i=@; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=@; k<noiseDepth; k++) { 
data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+0 ] 


(GLubyte) turbulence(i, j, k, maxZoom) ; 
data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+1 ] 


(GLubyte) turbulence(i, j, k, maxZoom) ; 


data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+2 ] 


(GLubyte) turbulence(i, j, k, maxZoom) ; 
data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4) +k*4+3 ] 


(GLubyte) 255; 





3D 噪 声 图 〈 如 图 14.15 所 示 ) 可 用 于 各 种 富有 想象 力 的 应 用 。 在 接 
下 来 的 部 分 中 ， 我 们 将 使 用 它们 来 生成 大 理 石 、 木 材 和 云 。 可 以 通过 放 
大 级 别 的 不 同 组 合 来 调整 噪声 的 分 布 。 

















图 14.15 “ 满 流 ”噪声 的 3D 纹 理 贴图 








14.6 ”噪声 应 用 一 一 大 理 石 


通过 修改 噪声 图 并 使 用 适当 的 ADS 材 料 添加 Phong 照 明 ， 我 们 可 以 
使 龙 模型 看 起 来 像 一 块 大 理 石 般 的 石头， 如 图 7.3 所 示 。 





我 们 首先 生成 一 个 条 纹 图 案 ， 有 点 类 似 于 本 章 前 面 的 “条 纹 ” 示 例 
新 条 纹 与 之 前 的 条 纹 不 同 ， 首 先是 因为 它们 是 对 角 线 ， 还 因为 它们 








是 由 正弦 波 产生 的 ， 因 此 边缘 是 模糊 的 。 然 后 ， 我 们 使 用 噪声 图 来 扰动 
这 些 线 ， 将 它们 存储 为 灰 度 值 。filDataArray0) 函 数 的 更 改 如 下 : 


void fillDataArray(GLubyte data[ ]) { 
double veinFrequency = 2.0; 
double turbPower = 1.5; 
double maxZoom = 64.0; 
for (int i=@; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=@; k<noiseDepth; k++) { 
double xyzValue = (float)i / noiseWidth + (float)j / noiseH 
eight + (float)k / 
noiseDepth + turbPower * turbulence(i,j,k 
,»maxZoom) / 256.0; 
double sineValue = abs(sin(xyzValue * 3.14159 * veinFrequen 


cy)); 


float redPortion = 255.0f * (float)sineValue; 
float greenPortion = 255.6f * (float)sineValue; 
float bluePortion = 255.6f * (float)sineValue; 


data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+0 ] 
(GLubyte) redPortion; 
data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+1 ] 
(GLubyte) greenPortion; 
data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+2 ] 
= (GLubyte) bluePortion; 
data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+3 ] 
= (GLubyte) 255; 
+t} 





46 E veinFrequency H F RRRA E, turbSizeiil AE kim nT AE 
用 的 缩放 系数 ，turbPower 调 整 条 纹 中 的 扰动 量 〈 将 其 设置 为 0， 使 条 纹 
不 受 干扰 ) 。 由 于 相同 的 正弦 波 值 用 于 所 有 3 个 〈RGB ) 颜色 分 量 ， 所 
以 存储 在 图 像 数 据 阵列 中 的 最 终 颜 色 是 灰 度 级 的 。 图 14.16 显 示 了 各 种 
turbPower 值 0.0、5.5、1.0 和 1.5， 从 左 到 右 ) 的 结果 纹理 贴图 。 
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图 14.16 ”构建 3D“ 大 理 石 ”噪声 图 








由 于 我 们 希望 大 理 石 具有 闪 亮 的 外 观 ， 我 们 采用 Phong 着 色 使 得 “大 
理 石 ?纹理 物体 看 起 来 令 人 信服 。 程 序 14.5 总 结 了 生成 大 理 石 龙 的 代码 。 
除了 我 们 还 传递 了 原始 顶 反 坐标 以 用 作 3D 纹 理 坐 标 〈 如 前 所 述 ) » Tit 
点 和 片段 着 色 器 与 用 于 Phong 着 色 的 相同 。 片 段 着 色 器 使 用 前 面 7.6 节 中 
描述 的 技术 将 噪声 结果 与 光照 结果 结合 。 




















程序 14.5 ”构建 大 理 石 龙 











C++ / OpenGL 应 用 程序 : 





// 用 于 Phong 着 色 的 白光 ADS 设 置 

float globalAmbient[4] = {0.5f, @.5f, @.5f, 1.0f}; 
float lightAmbient[4] 0.6f, 606.6f, ©.Of, 1.00f}; 
float lightDiffuse[4] 1.6f, 1.6f, 1.6f, 1.6f}; 
float lightSpecular[4] = {1.0f, 1.0f, 1.6f, 1.0f}; 
float matShi = 75 .6f; 








nA 


void init(GLFWwindow* window) { 


generateNoise(); 
noiseTexture = load3DTexture(); // 和 程序 14.4 一 样 ， 负 责 调 用 fi11D 
ataArray() 





void fillDataArray(GLubyte data[ ]) { 
double veinFrequency = 1.75; 
double turbPower = 3.0; 
double turbSize = 32.0; 
// 剩 下 部 分 构建 大 理 石 噪声 图 的 和 之 前 的 一 样 























} 


顶点 着 色 器 
// 和 程序 14 .4 一 样 





片段 着 色 器 





void main(void) 


77 模型 顶点 取 值 [-1.5，+1.5]， 纹 理 坐 标 取 值 [9，1] 


vec4 texColor = texture(s, originalPosition / 3.0 + 0.5); 


fragColor = 


@.7 * texColor * (globalAmbient + light.ambient + light.diffuse * ma 
x(cosTheta,@.@)) 


+ 0.5 * light.specular * pow(max(cosPhi, 0.0), material.shininess) ; 


} 





有 多 种 方法 可 以 模拟 不 同 颜色 的 大 理 石 〈 或 其 他 石材 ) 。 改 变 大 理 
石 中 “矿脉 ?颜色 的 一 种 方法 是 修改 包 DataArray0 函 数 中 Color 变 量 的 定 
义 ， 例 如 ， 通 过 增加 绿色 成 分 : 


float redPortion = 255.0f * (float)sineValue; 
float greenPortion = 255.0f * (float)min(sineValue*1.5 - 0.25, 1.0); 





float bluePortion = 255.@f * (float)sineValue; 





我 们 还 可 以 引入 ADS 材 料 值 [ 即 在 initO0 中 指定 」 来 模拟 完全 不 同类 
型 的 石头 ， 例 如 “玉石 ”。 


图 14.17《〈 见 彩 插 ) 显示 了 4 个 示例 ， 前 3 个 使 用 程序 14.5 所 示 的 设 
置 ， 第 四 个 示例 包含 前 面 图 7.3 所 示 的 “jade”*ADS 材 料 值 。 

















图 14.17 ”3D 噪 声 图 纹理 的 龙 一 一 3 个 大 理 石 和 1 个 玉 质 








14.7 ”噪声 应 用 一 一 木材 





创建 “木材 ”纹理 可 以 采用 与 之 前 “大 理 石 ”示例 中 类 似 的 方式 。 树 木 
按照 年 轮 生 长 ， 正 是 这 些 年 轮 成 了 我 们 在 用 木头 制 成 的 物体 中 看 到 
的 “ 木 纹 *”。 随 大 树木 的 生长 ， 环 境 压力 会 在 年 轮 中 产生 变化 ， 我 们 也 会 
在 木 纹 中 看 到 这 种 变化 。 


我 们 首先 构建 一 个 程序 性 的 “年 轮 ”3D 纹 理 贴图 ， 类 似 于 本 半 前 面 
的 “棋盘 格 ”"。 然 后 ， 我 们 使 用 品 声 图 来 扰动 这 些 年 轮 ， 将 深 色 和 浅 棕色 
插入 年 轮 纹理 贴图 中 。 通 过 调整 年 轮 的 数量 以 及 扰动 年 轮 的 程度 ， 我 们 
可 以 用 各 种 类 型 的 木 纹 模拟 木材 。 标 色 的 色调 可 以 通过 组 合 相 似 数量 的 
红色 和 绿色 、 少 量 赣 色 来 制作 。 然 后 ， 我 们 应 用 具有 低 “ 光 泽 ? 的 Phong 
着 色 。 


FRAT BY MTA Ac fillDataArray() PAI BOOKA A RRDA FEE B] 
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波 循环 重复 此 过 程 ， 根 据 此 正弦 波 均匀 地 升 高 和 降低 红色 和 绿色 成 分 ， 
以 产生 不 同 的 村 色调 。 变 量 sineValue 保 持 精 确 的 色调 ， 可 以 通过 稍微 偏 
移 一 个 分 量 或 另 一 个 分 量 来 调整 《在 这 种 情况 下 ， 将 红色 增加 80， 将 绿 
色 增 加 30) 。 我 们 可 以 通过 调整 xyPeriod 的 值 来 创建 更 多 GRED) 的 
年 轮 。 得 到 的 纹理 如 图 14.18 所 示 〔〈 见 彩 插 ) 。 








void fillDataArray(GLubyte data[ ]) { 
double xyPeriod = 40.0; 
for (int i=@; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=@; k<noiseDepth; k++) { 
double xValue = (i - (double)noiseWidth/2.0) / (double)nois 
eWidth; 


double yValue = (j - (double)noiseHeight/2.0) / (double)noi 


seHeight ; 

double distanceFromZ = sqrt(xValue * xValue + yValue * yVal 
ue) 

double sineValue = 128.0 * abs(sin(2.@ * xyPeriod * distanc 
eFromZ * 3.14159)); 


float redPortion = (float)(8@ + (int)sineValue) ; 
float greenPortion = (float)(30 + (int)sineValue) ; 
float bluePortion = 0.0f; 


data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+0 ] 
= (GLubyte) redPortion; 

data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+1 ] 
= (GLubyte) greenPortion; 

data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+2 ] 
= (GLubyte) bluePortion; 

data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+3 ] 








图 14.18 ”为 3D 木 材 纹理 创建 年 轮 


图 14.18 中 的 木质 年 轮 环 是 一 个 很 好 的 开始 ， 但 它们 看 起 来 不 太 通 
真一 一 它们 太 完 美 了 了。 为 了 改善 这 一 点 ， 我 们 使 用 噪声 图 (更 具体 地 
bi, Felt) 来 扰动 distanceFromZ 变 量 ， 使 得 环 具 有 轻微 的 变化 。 计 算 
修改 如 下 : 
double distanceFromZ = sqrt(xValue * xValue + yValue * yValue) 


+ turbPower * turbulence(i, j, k, maxZ 
oom) / 256.0; 


同样 ， 变 量 turbPower 调 整 应 用 了 多 少 消 流 〈 将 其 设置 为 0.0， 产 生 
图 14.18 所 示 的 未 受 干扰 的 版 本 ) ， 并 且 maxZoom 指 定 缩放 值 〈 在 此 示 
例 中 为 32) 。 图 14.19 显 示 了 turbPower 值 0.05、1.0 和 2.0〈 从 左 到 右 ) 得 
到 的 木材 纹理 。 





图 14.19 “木材 ”3D 纹 理 贴图 与 噪声 地 图 扰动 的 年 轮 


我 们 现在 可 以 将 3D 木 材 纹理 贴图 应 用 于 模型 。 通 过 对 用 于 纹理 华 
标的 originalPosition 顶 点 位 置 应 用 旋转 ， 可 以 进一步 增强 纹理 的 真实 
感 ， 这 是 因为 用 木头 雕刻 的 大 多 数 物品 与 年 轮 的 方 癌 不 完全 对 齐 。 为 
此 ， 我 们 向 着 色 器 发 送 一 个 额外 的 旋转 矩阵 ， 以 旋转 纹理 坐标 。 我 们 还 
添加 了 Phong 着 色 ， 具 有 适当 的 木 色 ADS 值 和 适度 的 光泽 度 。 创 建 “木质 
海豚 ”的 完整 代码 补充 和 更 改 见 程 序 14.6。 





程序 14.6 ”构建 木质 海豚 








C++ / OpenGL 应 用 程序 : 


glm: :mat4 texRot; 


// 木质 材质 (棕色 ) 

float matAmbient[4] 0.5f, 0.35f, 0.15f, 1.0f}; 
float matDiffuse[4] 0.5f, 0.35f, 0.15f, 1.0f}; 
float matSpecular[4] = {0.5f, 0.35f, 0.15f, 1.0f}; 
float matShi = 15.0f; 


= { 
= { 


void init(GLFWwindow* window) { 














// 旋转 应 用 于 纹理 坐标 一 增加 额外 的 木 纹 变化 

texRot = glm::rotate(glm: :mat4(1.0f), toRadians(20.0f), glm::vec3(0.0f, 
1.0f, @.0f)); 
} 





void fillDataArray(GLubyte data[ ]) { 

double xyPeriod = 40.0; 

double turbPower = @.1; 

double maxZoom = 32.0; 

for (int i=@; i<noiseWidth; i++) { 

for (int j=0; j<noiseHeight; j++) { 
for (int k=@; k<noiseDepth; k++) { 
double xValue = (i - (double)noiseWidth/2.@) / (double)nois 


eWidth; 

double yValue = (j - (double)noiseHeight/2.0) / (double)noi 
seHeight; 

double distanceFromZ = sqrt(xValue * xValue + yValue * yVal 
ue) 


+ turbPower * turbulence(i, j, k, ma 
xZoom) / 256.0; 
double sineValue = 128.0 * abs(sin(2.@ * xyPeriod * distanc 
eFromZ * Math.PI)); 


float redPortion = (float)(86 + (int)sineValue); 
float greenPortion = (float)(30 + (int)sineValue) ; 
float bluePortion = 0.0f; 


data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+0 ] 
(GLubyte) redPortion; 

data[i*(noiseWidth*noiseHeight*4 )+j* (noiseHeight*4)+k*4+1 ] 
(GLubyte) greenPortion; 

data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+2 ] 
(GLubyte) bluePortion; 

data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+3 ] 
= (GLubyte) 255; 
} }}} 


void display(GLFWwindow* window, double currentTime) { 


tLoc = glGetUniformLocation(renderingProgram, "texRot"); 
glUniformMatrix4fv(tLoc, 1, false, glm::value_ptr(texRot)); 


} 


UL at 

















uniform mat4 texRot; 


void main(void) 


on 


originalPosition = vec3(texRot * vec4(position,1.@)).xyz; 


} 
片段 着 色 器 





void main(void) 
{ 


uniform mat4 texRot; 














// 将 光照 和 3D 纹理 结合 
fragColor = 
@5*(...) 
+ 
@.5 * texture(s,originalPosition / 2.0 + 9.5); 











3D 材 质 的 木质 海豚 如 图 14.20 所 示 。 





图 14.20 “木材 ?3D 噪 声 图 纹理 的 海豚 


片段 着 色 器 中 还 有 一 个 值得 注意 的 细节 。 由 于 我 们 在 3D 纹 理 内 旋 
转 模 型 ， 所 以 有 时 可 能 会 寻 致 顶点 位 置 因 旋转 而 移动 超出 所 需 的 [0...1] 
纹理 坐标 范围 。 如 果 发 生 这 种 情况 ， 我 们 可 以 通过 将 原始 顶点 位 置 除 以 
更 大 的 数字 《例如 4.0 而 不 是 2.0) 来 调整 这 种 可 能 性 ， 然 后 添加 稍 大 一 
些 的 数字 《例如 0.6) 以 使 其 在 纹理 空间 中 居中 。 





14.8 ”噪声 应 用 一 一 云 


HUT 14.15 Fa EY ini RE AERA Ra. AA, EAR 
正确 的 颜色 ， 所 以 我 们 首先 将 它 从 灰 度 变 为 适当 的 浅 蓝 色 和 白色 混合 。 
一 种 直接 的 方法 是 为 蓝 色 分 量 指定 一 个 最 大 值 为 1.0 的 颜色 ， 为 红色 和 
绿色 分 量 指定 0.0 一 1.0 的 变化 《但 相等 的 ) 值 ， 具 体 取 决 于 噪声 图 中 的 
值 。 新 的 flDataArray() 函 数 如 下 : 











void fillDataArray(GLubyte data[ ]) { 
for (int i=@; i<noiseWidth; i++) { 
for (int j=@; j<noiseHeight; j++) { 
for (int k=@; k<noiseDepth; k++) { 
float brightness = 1.0f - (float) turbulence(i,j,k,32) / 25 


float redPortion = brightness*255.0f; 
float greenPortion = brightness*255.0f; 
float bluePortion = 1.0f*255.0f; 


data[i*(noiseWidth*noiseHeight*4 )+j* (noiseHeight*4)+k*4+0 ] 
= (GLubyte) redPortion; 

data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+1 ] 
= (GLubyte) greenPortion; 

data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+2 ] 
= (GLubyte) bluePortion; 

data[i*(noiseWidth*noiseHeight*4)+j* (noiseHeight*4)+k*4+3 ] 
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古 一 个 球体 或 半球 体 ， 在 禁用 深度 测试 的 情况 下 被 纹理 化 和 泻 染 ， 并 放 
置 使 其 围绕 相机 类似 于 天 空 盒 


构建 天 大 的 一 种 方法 是 使 用 顶点 坐 标 作为 纹理 坐标 ， 以 与 我 们 对 其 
他 3D 纹 理 相 同 的 方式 对 其 进行 纹理 化 。 然 而 ， 在 这 种 情况 下 ， 事 实证 
明 使 用 天 大 的 2D 纹 理 坐 标 会 产生 看 起 来 更 像 云 的 图 案 ， 因 为 球面 扭曲 
会 略微 拉 伸 纹理 贴图 。 我 们 可 以 通过 将 GLSL 的 textureO 调 用 中 的 第 三 维 
设置 为 常量 值 来 从 噪声 图 中 获取 2D 切 片 。 假 设 天 幕 的 纹理 坐标 已 经 以 


标准 方式 发 送 到 顶点 属性 中 的 OpenGL 管 线 ， 下 面 的 片段 着 色 器 使 用 品 
声 图 的 2D 切 片 对 其 进行 纹理 化 : 


#version 430 

in vec2 tc; 

out vec4 fragColor; 
uniform mat4 mv_matrix; 
uniform mat4 proj_matrix; 


layout (binding=@) uniform sampler3D s; 


void main(void) 
{ fragColor = texture(s,vec3(tc.x, tc.y, 8.5)); ie ett Pte.z 
} 








frp Bl) ACER RAE R14.21 URR o BAHNE A BOUL 
置 在 天 磊 内 ， 但 我 们 在 外 面 使 用 相机 进行 泻 染 ， 因 此 可 以 看 到 圆 顶 本 刁 
的 效果 。 当 前 的 噪声 图 导致 云 “ 看 起 来 模糊 不 清 ”。 





图 14.21 云雾 绑 绕 纹理 的 天 幕 


虽然 我 们 的 膀胱 云 看 起 来 不 错 ， 但 我 们 希望 能 够 塑造 它们 一 一 也 就 
是 说 ， 让 它们 更 多 或 更 少 腊 腌 。 一 种 方法 是 修改 turbulence0 郴 数 ， 使 其 
使 用 指数 〈 如 logistic 函 数 ) ， 辐 让 云 看 起 来 更 “明显 ”。 修 改 后 的 
turbulence(O) 函 数 以 及 相关 的 logisticO 函 数 如 程序 14.7 所 示 。 完 整 的 程序 
14.7 还 包含 前 面 描述 的 smoothO、flDataArray0 和 generateNoiseO) 函 数 。 

















程序 14.7 云 纹 理 生 成 








C++ / OpenGL 应 用 程序 : 


double turbulence(double x, double y, double z, double size) { 
double value = 0.0, initialSize = size, cloudQuant; 
while(size >= 0.9) { 
value = value + smoothNoise(x/size, y/size, z/size) * size; 
Size = size / 2.0; 


} 
cloudQuant = 110.0; // 可 微调 的 云 质量 


value = value / initialSize; 
value = 256.0 * logistic(value * 128.0 - cloudQuant) ; 
return value; 


} 


double logistic(double x) { 
double k = @.2; // FY Go A zs REE, PAE Be BERD A oP A A ad FE 
return (1.0 / (1.0 + pow(2.718, -k*x))); 

} 
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值 ， 从 而 产生 具有 更 多 不 同 云 边界 的 视 沉 效果 。 变 量 cloudQuant 调 整 噪 
PAPA IRTEE) 的 相对 量 ， 这 反 过 来 导致 当 应 用 logistic 函 数 
时 产生 更 多 《或 更 少 ) 的 白色 区 域 〈 即 不 同 的 云 ) 。 由 此 产生 的 天 车 现 
在 具有 更 明显 的 云层， 如 图 14.22 所 示 〈 见 彩 择 )。 


4 | > 


4 




















图 14.22 ”指数 云 纹理 的 天 幕 





最 后 ， 真 正 的 云 不 是 静态 的 。 为 了 增强 云 的 真实 感 ， 我 们 应 该 通过 
以 下 方式 使 它们 变 得 生动 : (a) 使 它们 随 看 时 间 的 推移 而 移动 或 “ 漂 
E: O) 随 痢 它们 漂移 逐渐 改变 它们 的 形状 。 





使 云 “ 深 移 ”的 一 种 简单 方法 是 绥 慢 旋转 天 磊 。 这 不 是 一 个 完美 的 解 
决 方案 ， 因 为 真实 的 云 往往 会 沿 着 直线 方向 漂移 ， 而 不 是 围绕 观察 者 旋 
转 。 但 是 ， 如 果 旋 转 缓慢 且 云 只 是 用 于 闭 饰 场景 ， 则 效果 可 能 是 足够 
的 。 
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到 我 们 用 于 纹理 云 的 3D 品 声 图 ， 实 际 上 有 一 种 非常 简单 而 聪明 的 方法 
来 实现 这 种 效果 。 回 想 一 下 ， 虽 然 我 们 为 云 构建 了 一 个 3D 纹 理 噪 声 
图 ， 但 到 目前 为 止 我 们 只 使 用 了 它 的 一 个 “切片 >， 跟 天 幕 的 2D 纹 理 坐 标 
相交 我 们 将 纹理 查找 的 Z 坐 标 设置 为 一 个 第 量 值 )。 到 目前 为 止 ，3D 
纹理 的 其 余部 分 尚未 使 用 。 





我 们 的 技巧 是 将 纹理 查找 的 常量 2 坐标 蔡 换 为 随时 间 逐 渐变 化 的 变 
量 。 也 就 是 说 ， 当 我 们 旋转 天 幕 时 ， 我 们 逐渐 增加 深度 变量 ， 导 致 纹理 
碍 找 使 用 不 同 的 切片 。 回 想 一 下 ， 当 我 们 构建 3D 纹 理 贴 图 时 ， 我 们 将 
平 清 应 用 于 沿 3 个 轴 的 颜色 变化 。 因 此 ， 纹 理 贴 图 中 的 相 邻 切片 非常 相 
似 ， 但 略 有 不 同 。 因 此 ， 通 过 逐渐 改变 texture() 调 用 中 的 Z 值 ， 云 的 外 观 
将 逐渐 改变 。 


代码 更 改 导 致 云 缓慢 移动 并 随时 间 变 化 ， 如 程序 14.8 所 示 。 




















程序 14.8 ”动画 云 纹理 





C++ / OpenGL 应 月 














double rotAmt = 0.0; // 用 来 让 云 看 起 来 漂移 的 Y 轴 旋转 量 
float depth = 0.01f; // 3D 噪 声 图 的 深度 查找 ， 用 来 使 云 逐 渐变 化 
































void display(GLFWwindow* window, double currentTime) { 


// 逐渐 旋转 天 幕 

mMat = glm::translate(glm::mat4(1.0f), glm::vec3(domeLocX, domeLocY, do 
meLocZ); 

rotAmt += 0.02; 

mMat = glm::rotate(mMat, rotAmt, glm::vec3(0.0f, 1.0f, @.OFf)); 














// 逐渐 修改 第 三 个 纹理 坐标 ， 以 使 云 变化 

dLoc = glGetUniformLocation(program, "d"); 

depth += 0.000905f; 

if (depth >= 0.99f) depth = 0.01f; // 当 我 们 到 达 纹 理 贴 图 的 终点 
时 返回 开头 

glUniform1f(dLoc, depth); 


























} 
片段 着 色 器 


#version 430 





in vec2 tc; 
out vec4 fragColor; 


uniform mat4 mv_matrix; 
uniform mat4 proj_matrix; 
uniform float d; 


layout (binding=@) uniform sampler3D s; 


void main(void) 

{ fragColor = texture(s, vec3(tc.x, tc.y, d)); // 逐渐 改变 的 "d" 
蔡 换 前 面 的 常量 

} 





虽然 我 们 无 法 在 单个 静止 图 像 中 显示 逐渐 改变 漂移 和 动画 的 云 的 效 
果 ， 但 图 14.23 显 示 了 3D 生 成 云 的 一 系列 快照 中 的 这 些 变 化 ， 因 为 它们 
从 右 到 左 课 移 在 天 幕 上 ， 并 在 漂移 时 缓慢 改变 形状 。 








图 14.23 ”3D 云 在 漂移 时 改变 


14.9 ”噪声 应 用 一 一 特殊 效果 


噪声 纹理 可 用 于 各 种 特殊 效果 。 事 实 上 ， 有 许多 可 能 的 用 途 ， 其 适 
用 性 仅 受到 想象 力 的 限制 。 


我 们 将 在 此 展示 的 一 个 非常 简单 的 特殊 效应 是 溶解 效应 。 我 们 使 物 
体 看 起 来 逐渐 溶解 成 小 颗粒 ， 直 到 它 最 终 消 失 。 给 定 3D 噪 声 纹 理 ， 可 
以 使 用 非常 少 的 附加 代码 实现 此 效果 。 


为 了 促进 溶解 效果 ， 我 们 引入 了 GLSL 的 discard 人 命令。 此 命令 仅 在 
片段 着 色 器 中 是 合法 的 ， 并 且 在 执行 时 ， 它 会 导致 片段 着 色 器 丢弃 当前 








FE (意味 看 不 泻 染 它 )。 





我 们 的 策略 很 简单 。 在 C++/OpenGL 应 用 程序 中 ， 我 们 创建 了 一 个 
与 图 14.12 所 示 相 同 的 细 粒 度 噪 声 纹 理 贴 图 ， 以 及 随时 间 逐 渐 增 加 的 浮 


点 变量 计数 器 。 然 后 ， 此 变量 在 着 色 器 管线 中 以 统一 变量 上 发送， 并 且 品 
声 图 也 放置 在 具有 关联 和 采样 器 的 纹理 贴图 中 。 然 后 片段 着 色 器 使 用 采样 





器 访问 噪声 纹理 一 一 在 这 种 情况 下 ， 我 们 使 用 返回 的 噪声 值 来 确定 是 否 
丢弃 该 片段 。 我 们 通过 将 灰 度 品 声 值 与 计数 器 进行 比较 来 实现 这 一 点 ， 
计数 器 用 作 一 种 “ 浆 值 ” 值 。 因 为 浆 值 随 着 时 间 的 推移 逐渐 变化 ， 我 们 可 
以 将 其 设置 为 逐渐 丢弃 越 来 越 多 的 片段 。 结 果 是 物体 似乎 逐渐 溶解 。 程 
序 14.9 显 示 了 相关 的 代码 部 分 ， 它 们 被 添加 到 程序 6.1 中 的 地 球 泻 染 球体 
中 。 生 成 的 输出 如 图 14.24 所 示 。 


程序 14.9 ”使 用 discard 命 令 的 溶解 效果 











C++ / OpenGL 应 用 程序 : 


























float threshold = 8.6f; // 用 于 保留 、 丢 弃 片 段 的 逐渐 增长 的 闹 值 


在 display() 中 

tLoc = glGetUniformLocation(renderingProgram, "t"); 
threshold += .002f; 

glUniform1f(tLoc, threshold); 


glActiveTexture(GL_TEXTURE®@) ; 
glBindTexture(GL_TEXTURE_3D, noiseTexture) ; 


glActiveTexture(GL_TEXTURE1) ; 
glBindTexture(GL_TEXTURE_2D, earthTexture) ; 


glDrawArrays(GL_TRIANGLES, ©, numSphereVertices) ; 


片段 着 色 器 





#version 430 


























in vec2 tc; // 当前 片段 的 纹理 坐标 
in vec3 origPos; // 模型 中 的 原始 顶点 位 置 ， 用 于 访问 3D 纹 理 
layout (binding=@) uniform sampler3D n; // 用 于 噪声 纹理 的 采样 器 
layout (binding=1) uniform sampler2D e; // 用 于 地 球 纹理 的 采样 器 
uniform float t; // FAY ARPES A BAY BY 
void main(void) 
{ float noise = texture(n, origPos).x; // 从 片段 中 取得 噪声 值 
if (noise > t) // WORM AY 4 BE 
{ fragColor = texture(e, tc); // 则 使 用 地 球 纹理 演 染 片段 
} 
else 
{ discard; // BW, BRA ABR 
) 
} 
} 











图 14.24 ”使 用 discard 着 色 器 的 溶解 效果 


如 果 可 能 ， 丢 弃 命 令 应 该 谨慎 使 用 ， 因 为 它 可 能 会 导致 性 能 损失 。 
这 是 因为 它 的 存在 使 OpenGL 更 难以 优化 Z 缓 冲 深 度 测试 。 


补充 说 明 


在 本 章 中 ， 我 们 使 用 Perlin 噪 声 生成 云 、 模 拟 木材 和 大 理 石 般 的 石 
头 ， 并 且 用 它们 这 染 龙 。 人 们 发 现 了 Perlin 噪 音 的 许多 其 他 用 途 。 例 
如 ， 它 可 用 于 创建 火焰 和 烟雾 [CC16, AEI4， 构 建 逼 真 的 凹凸 贴图 [SR0>]， 
并 已 在 电子 游戏 Minecraft PEH h H FERE. 


本 章 生 成 的 噪声 图 基于 Lode Vandevenne [VA04] 描 述 的 程序 。 我 们 的 
3D 云 生成 仍 存 在 一 些 不 足 之 处 。 纹 理 不 是 无 颖 的 ， 所 以 在 360? 点 有 一 条 
明显 的 垂直 线 (这 也 是 我 们 在 程序 14.8 中 以 0.01 而 不 是 0.0 开 始 深度 变量 
的 原因 ， 以 避免 在 噪声 图 的 Z 维 中 过 到 接 颖 ) 。 如 采 需 要 ， 也 有 用 于 去 
除 接 颖 [As04 的 简单 方法 。 另 一 个 问题 是 在 天 幕 的 北峰 处 ， 天 幕 中 的 球 
形 畸 变 会 产生 枕 形 效应 。 








我 们 在 本 章 中 实现 的 云 也 无 法 模拟 真实 云 的 一 些 重要 方面 ， 例 如 它 
们 散射 太阳 光 的 方式 。 真 正 的 云 也 往往 在 顶部 更 白 ， 在 底部 更 灰暗 。 我 
们 的 云 也 没有 达到 许多 实际 云 所 具有 的 3D“ 迁 松 ” 外 观 。 





类 似 地 ， 存 在 用 于 产生 粤 的 更 全 面 的 模型 ， 例 如 Kilgard 和 Fernando 
[KF03] 描 述 的 模型 。 


在 阅读 OpenGL 文 档 时 ， 读 者 可 能 会 注意 到 GLSL 人 包含 一 些 名 为 
noise10、noise20、noise30 和 noise40 的 噪声 函数 ， 它 们 被 描述 为 采用 输 
入 种 子 并 产生 类 似 高 斯 的 随机 输出 。 我 们 在 本 章 中 没有 使 用 这 些 函 数 ， 
因为 在 撰写 本 文 时 ， 大 多 数 供应 商都 没有 实现 它们 。 例 如 ， 无 论 输入 种 
子 如 何 ， 许 多 NVIDIA 显 卡 目前 只 会 为 这 些 函 数 返 回 0 值 。 


习题 


14.1 ”修改 程序 14.2 以 逐渐 增加 对 象 的 Alpha 值 ， 使 其 逐渐 淡出 并 最 
终 消失 。 


14.2 ”修改 程序 14.3 以 治水 平方 回 剪 裁 环 面 ， 形 成 圆 形 “ 模 ”。 


14.3 ”修改 程序 14.4 (包含 图 14.10 中 修改 的 版 本 ， 产 生 3D 立 方 纹 
H) ， 将 它 改 为 纹理 化 Studio 522 海 豚 ， 然 后 观察 结果 。 许 多 人 在 第 一 
次 观察 结果 时 一 一 例如 龙 上 显示 的 结果 ， 甚 至 更 简单 的 物体 一 一 都 认为 
程序 中 存在 一 些 错误 。 即 使 在 简单 的 情况 下 ， 也 可 以 通过 从 3D 纹 理 “ 雕 
刻 ? 对 象 来 产生 意外 的 表面 图 案 。 











14.4 ”用 于 定义 木质 “年 轮 环 ”的 简单 正弦 波 〈 如 图 14.18 所 示 〉 产生 
环 ， 其 中 亮 区 和 上 暗 区 的 宽度 相等 。 尝 试 修改 相关 的 血 IDataArray0 函 数 ， 
目的 是 使 暗 环 的 宽度 比 光 环 罕 。 然 后 观察 对 所 得 木质 纹理 物体 的 影响 。 





14.5 CHH) 将 logistic 函 数 〈 来 自 程 序 14.7) 整合 进程 序 14.5 中 的 
大 理 石 龙 ， 并 试验 设置 以 创建 更 多 不 同 的 矿脉 。 


14.6 ”修改 程序 14.9 以 包含 前 面 章节 中 描述 的 缩放 、 平 滑 、 淇 流 和 
又 。 观 察 所 产生 的 溶解 效果 的 变化 。 
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[由 电影 艺术 与 科学 学 院 贫 发 的 奥斯卡 技术 成 就 奖 。 


[2] “logistic” (“sigmoid”) 函数 具有 S 形 曲线 ， 两 庙 都 有 渐 近 线 。 御 
见 的 例子 是 双 曲 正切 函数 和 Ho = 1(1+e-x)。 它 们 有 时 也 被 称 为 “ 挤 





附录 A PC (Windows) 上 的 安装 与 设置 


如 第 1 章 所 述 ， 为 了 在 你 的 计算 机 上 使 用 OpenGL 和 C++， 必 须 完成 
许多 安装 和 设置 步 又。 这些 步骤 取 诀 于 你 所 使 用 的 平台 。 本 书 中 的 代码 
示例 运行 于 PC (Windows) E; 本 附录 为 Windows 平 台 提 供 了 逐步 设置 
的 详细 说 明 。 有 关 在 Mac 上 设置 和 运行 本 书 中 的 代码 示例 的 信息 ， 请 参 
阅 附录 B。 


Al 安装 库 和 开发 环境 


A.1.1 安装 开发 环境 


由 于 我 们 在 本 书 的 整个 过 程 中 实现 了 多 个 项 目 ， 并 且 在 OpenGL 中 
有 很 多 库 需 要 协调 ， 所 以 我 们 需要 以 如 下 方式 来 设置 C++ 开发 环境 ， 以 
最 大 限度 地 减少 每 个 新 建 项 目 所 需 的 配置 步 又。 这 里 ， 我 们 使 用 Visual 
Studio 2017 IV5174， 类 似 的 步骤 也 可 以 应 用 在 其 他 集成 开发 环境 中 。 





第 一 步 是 在 机 器 上 下 载 并 安装 Visual Studio 2017。 完 成 安装 后 ， 我 
们 的 方法 是 在 单个 共享 位 置 安装 尽 可 能 多 的 库 ， 然 后 创建 一 个 Visual 
Studio 的 自 定 义 模板 ， 之 后 ， 我 们 创建 的 每 个 新 项 目 都 已 经 具有 必要 的 
库 和 依赖 项 ， 而 不 必 重 新 定义 。 创 建 模板 的 描述 在 附录 A.2.1 中 。 





A.1.2 ”安装 OpenGL / GLSL 


OpenGL 或 GLSL 并 不 需要 “安装 *”， 但 需要 确保 你 的 显卡 至 少 支 持 
OpenGL 4.3 版 。 如 果 你 不 知道 机 器 支持 哪 种 版 本 的 OpenGL， 可 以 使 用 
各 种 免费 应 用 程序 (例如 GLView [SV16]) 来 检查 。 


A.1.3 准备 GLFW 


第 1 章 中 给 出 了 窗口 管理 库 GLFW 的 概述 。 正 如 第 1 章 中 指出 的 ， 需 
要 在 运行 它 的 机 器 上 编译 GLFW。 (请 注意 ， 虽 然 GLFW 网 站 包含 预 编 
译 好 的 二 进 制 文件 下 载 选 项 ， 但 它们 经 常 无 法 正常 运行 。) 编译 GLFW 
需要 先 下载 并 安装 CMAKE。 编 译 GLFW 的 步 又 相对 简单 。 





(1) 下 载 GLFEW 源 代码 [GEF17]。 
(2) 下 载 并 安装 CMAKEICMI17] 。 


(3) 运行 CMAKE 并 输入 GLFW 源 代码 所 在 位 置 和 期 望 的 构建 目标 
文件 夹 。 


(4) 单 击 “configure”， 如 果 某 些 选 项 以 红色 高 亮 ， 请 再 次 单 


击 “configure”。 


(5) 单 击 “generate”。 








CMAKE 会 在 之 前 指定 的 “构建 ”文件 夹 中 生成 多 个 文件 。 访 文件 夹 


中 的 一 个 文件 名 为 “GLFW.sln”， 这 是 一 个 Visual Studio 项 目 文件 。 打 开 
它 〈 当 然 是 使 用 Visual Studio) 并 将 GLFW 编 译 ( 构 建 ) 为 32 位 应 用 程 
Fe (目前 比 64 位 更 稳定 )。 





生成 的 构建 产生 了 两 个 我 们 需要 的 项 目 : 


。 由 之 前 的 编译 步骤 生成 的 glfw3.lib 文 件 ; 
。 原始 GLFW 下 载 源 代码 中 的 “GLFW>” 文 件 夹 〈 可 在 “include” 文 件 夹 
中 找到 ， 它 包含 我 们 将 使 用 的 两 个 头 文件 ) 。 


A.1.4 准备 GLEW 
第 1 章 我 们 给 出 了 GLEW"“ 扩 展 管理 器 * 库 的 概述 。 从 GLEW 官 
网 [SEH 下 载 32 位 二 进 制 文件 。 我 们 需要 获得 的 项 目 是 : 


e glew32.lib (Æ Jib” XF F) ; 
e glew32.dll (在 发布" 文件 夹 中 ) ; 
。 GEL 文件 夹 ， 包 含 多 个 头 文 件 〈 在 “include” 文 件 夹 中 ) 。 








A.1.5 准备 GLM 


第 1 章 给 出 了 数学 库 GLM 的 概述 。 访 问 GLM 官 网 [GM17] 并 下 载 包含 
发 布 说 明 的 最 新 版 本 。 解 压缩 后 ， 下 载 文件 夹 包含 名 为 “glm” 的 文件 
夹 。 该 文件 夹 〈 及 其 内 容 ) 是 我 们 需要 使 用 的 项 目 。 





A.1.6 准备 SOIL2 


第 1 章 给 出 了 图 像 加 载 库 SOIL2 的 概述 。 安 装 SOIL2 LSo17] 需 要 使 用 
一 个 名 为 “premake” 的 工具 EMI7]。 虽 然 该 过 程 涉及 多 个 步骤 ， 但 它们 相 
对 简单 。 


(1) 下 载 并 解压 缩 “premake”， 其 中 唯一 的 文件 


是 “premake4.exe”。 


(2) 下 载 SOIL2( 使 用 左 侧面 板 底 部 的 “下 载 * 链 接 ) ， 然 后 解压 
缩 。 


(3) 将 “premake4.exe” 文 件 复制 到 soil2 文 件 夹 中 。 
(4) 打开 命令 行 窗口 ， 导 航 到 soil2 文 件 夹 ， 然 后 输入 : 
它 应 该 显示 随后 创建 的 文件 数量 。 


(5) 在 soil2 文 件 夹 中 ， 打 开 “make” 文 件 夹 ， 然 后 打开 “windows” 文 
件 夹 。 双 击 “SOIL2.sln”。 


(6) 如 果 Visual Studio 提 示 升 级 库 ， 请 单 击 “ 确 定 ” 按 钮 。 


(7) 在 右 侧 面板 中 ， 右 键 单 击 “soil2-static-lib” 并 选择 “构建 
(build) ”. 





(8) 关闭 Visual Studio 并 导航 回 soil2 文 件 夹 。 你 应 该 注意 到 一 些 新 
IH A 


A.1.7 YER TESA) “ib” Fl “include” x44 





选择 你 要 存放 库 文件 的 位 置 。 你 可 以 随意 选择 任何 文件 夹 ， 例 如， 
你 可 以 创建 一 个 文件 夹 “C:\ OpenGLtemplate”。 在 该 文件 夹 中 ， 创 建 名 
为 ib”* 和 “include” 的 子 文件 夹 。 





。 在 “ib” 文件 夹 中 ， 放 置 glew32.lib 和 glfw3.lib。 

。 在 “include” 文 件 夹 中 ， 放 置 前 面 描述 的 GL、GLFW 和 glm 文 件 夹 。 

。 导航 回 SOIL2 文 件 夹 ， 进 入 其 中 的 ib” 文 件 夹 。 将 “soil2- 
debug.lib” 文 件 复制 到 lib” 文 件 夹 (glew32.lib 和 glfw3.lib 所 在 的 文件 
JE) 。 

。 导航 回 SOIL2 文 件 夹 ， 然 后 导航 到 “src”。 将 “SOIL2” 文 件 夹 复制 
到 “include” 文 件 夹 (GL、GLFW 和 GLM 所 在 的 文件 夹 )。 此 SOIL2 
文件 夹 包含 soil2 的 .c 和 .h 文 件 。 

。 你 可 能 会 发 现 将 “glew32.dll”* 文 件 放 在 此 “OpenGLtemplate” 文 件 夹 中 
也 很 方便 ， 这 样 你 就 可 以 知道 在 哪里 找到 它 一 一 尽管 这 不 是 必要 
的 。 





文件 夹 结构 现在 应 该 如 图 A.1 所 示 。 










OpenGLtemplate 


glew32.dll 






include 


glew32.lib 
glfw3.lib 
soil2-debug.lib 
eglew.h glfw3.h glm.hpp SOIL2.c 
glew.h glfw3native.h  geometric.hpp SOIL2.h 
glxew.h exponential. hpp etc... 
wglew.h Cle 


图 A.1 建议 的 库 文 件 夹 结构 


A.2 在 MS Visual Studio 中 开发 和 部 署 OpenGL 
项 目 


创建 Visual Studio 目 定义 项 目 模 板 


因为 我 们 在 C++ /OpenGL 程 序 中 使 用 了 很 多 专用 库 ， 所 以 创建 
Visual Studio 模 板 将 使 启动 新 的 OpenGL 项 目 变 得 更 加 容易 。 本 节 介 绍 创 
建 和 使 用 此 模板 的 步骤 。 


启动 Visual Studio〈 假 设 为 2017 版 本 ) 。 创 建 一 个 新 的 空 C++ 项 
目 。 在 项 部 中 心 ， 羔 单 柱 下方 有 两 个 相 邻 的 下 拉 羔 8 


。 右 边 的 下 拉 菜 单 允许 你 指定 “x86" 或 “x64" 一 一 选择 “x86”。 
。 左 侧 的 下 拉 菜 单 允许 你 指定 是 在 “调试 "模式 还 是 “发 布 "模式 下 进行 
编译 。 对 于 这 两 个 模式 都 需要 完成 几 个 步 又 。 也 就 是 说 ， 它 们 应 该 











在 “调试 "模式 下 完成 ， 然 后 在 “发 布 ”模式 下 重复 。 





先 在 “调试 "模式 下 然后 在 “发 布 "模式 下 ) 进入 “项 目 属性 "并 进行 
以 下 更 改 : 


。 在 “VC++” 下 《也 可 以 说 是 “C/C++”) ， 单 击 “ 常 规 ”， 然 后 在 “其 他 
包含 目录 ”下 添加 你 之 前 创建 的 “include” 文 件 夹 。 

。 在 “链接 器 ”下 ， 有 以 下 两 个 更 改 。 
Ca) 单 击 “ 常 规 "， 然 后 在 “其 他 库 目 录 ” 下 添加 先前 创建 的 ib” 文 件 
K. 
(b) 单 击 “ 输 入 ”， 然 后 在 “附加 依赖 项 ”下 添加 以 下 4 个 文件 名 : 
glfw3.lib，glew32.lib，soil2-debug.lib 和 opengl32.lib (最 后 一 个 应 该 
已 作为 标准 Windows SDK 的 一 部 分 提供 ) 。 











对 “调试 ?和 ?发 布 ?模式 的 项 目 属性 都 进行 上 述 更 改 后 ， 就 可 以 开始 
创建 模板 了 。 创 建 模 板 通 过 进入 “项 目 ” 深 单 并 选择 “导出 模板 ”来 完成 。 
选择 “项 目 ” 模 板 ， 并 为 模板 提供 有 意义 的 名 称 ， 例 如 “OpenGL 


project”. 


安装 库 并 设置 好 上 自 定 义 模 板 后 ， 创 建 一 个 新 的 OpenGL C++ 项 目 就 
很 简单 了 。 


(1) 启动 Visual Studio， 在 荣 单 栏 < 文件 ”下 选择 “新 建 ” 项 目 ”。 





(2) 使 用 OpenGL 模 板 《〈 现 在 显示 为 选项 ) 来 创建 项 目 。 


(3) 在 右 侧 的 解决 方案 资源 管理 器 中 ， 在 “ 源 文件 "下 环 


加 “main.cpp”。 


(4) 在 右 侧 的 解决 方案 资源 管理 器 中 ， 右 键 单 击 项 目 名 称 ， 然 后 
在 弹出 菜单 中 选择 “在 文件 资源 管理 器 中 打开 文件 夹 "。 你 应 该 在 这 里 看 
到 main.cpp 文 件 。 着 色 器 文件 也 将 在 开发 期 间 放置 在 此 文件 夹 中 。 





(5) 同上 导航 一 级 到 父 文件 夹 ， 并 将 “glew32.dll”* 文 件 复制 
到 “Release” 或 “Debug” 文 件 夹 中 ， 具 体 取决 于 所 需 的 解决 方案 配置 。 


在 开发 、 测 试 和 调试 应 用 程序 之 后 ， 程 序 可 以 作为 一 个 单独 的 可 执 
行文 件 进行 部 署 。 部 署 时 需要 在 “发 布 "模式 下 构建 项 目 ， 然 后 将 以 下 文 
件 放 在 同一 个 文件 夹 中 。 














。 构建 项 目 时 生成 的 .exe 文 件 。 

。 应 用 程序 使 用 的 所 有 着 色 器 文件 。 

。 应 用 程序 使 用 的 所 有 纹理 图 像 和 模型 文件 。 
e glew32.dll. 
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附录 B Macintosh (macOS) 平台 上 的 安 
ae ET 


如 第 1 章 所 述 ， 为 了 在 机 器 上 使 用 OpenGL 和 C++， 必 须 完成 许多 安 
装 和 设置 步骤 。 这 些 步 又 取决 于 你 希望 使 用 的 平台 。 本 附录 提供 了 
Macintosh(macOS) 平 台 逐 步 设置 的 详细 说 明 。 有 关 在 Windows PC 上 设置 
和 运行 本 书 中 代码 示例 的 信息 ， 请 参阅 附录 A: PC(Windows) 上 的 安装 
与 设置 。 


在 过 去 的 几 年 中 ， 苹 果 对 Macintosh(macOS) 上 OpenGL 的 支持 逐渐 
蓉 缩 。 例 如 ， 在 撰写 本 文 时 ， 现 代 Mac 仍 然 只 文 持 OpenGL 4.1 版 。 尽 管 
如 此 ， 仍 然 可 以 对 本 书 中 的 示例 进行 一 些 修改 来 运行 。 在 准备 必要 的 库 
这 个 步 又 中 ， 第 1 章 中 描述 的 所 有 库 都 是 跨 平台 的 ， 可 用 于 苹果 
Macintosh(macOS)。 在 某 些 情况 下 ，Mac 上 的 安装 实际 上 更 简单 。 我 们 
首先 介绍 如 何 安装 这 些 库 ， 然 后 介绍 如 何 配置 开发 环境 。 


此 外 ， 由 于 本 书 中 的 代码 示例 用 在 Windows 平台 上 ， 因 此 本 附录 提 
供 了 有 关 转 换代 人 码 示例 的 详细 信息 ， 以 便 它们 在 Macintosh (macos) 上 
正确 运行 。 


B1 REMIT RA H 


B11 准备 并 安装 依赖 库 


第 1 章 概 述 了 每 个 库 的 目的 和 选择 。 我 们 不 会 在 此 重复 这 些 信 息 ; 
相反 ， 我 们 专注 于 如 何 安装 每 个 库 。 





我 们 首先 安装 GLEW 和 GLFW。 安 装 这 些 库 的 最 简单 方法 可 能 是 使 
用 “Homebrew” 工 具 。Homebrew 是 一 个 软件 包 管 理 器 ， 则 在 让 用 户 尽 可 
能 简单 地 在 Mac 上 安装 稼 用 的 实用 程序 。 安 装 Homebrew 的 步骤 如 下 : 





(1) 打开 Safari 浏 览 器 ， 访 问 Homebrew 网 站 。 


(2) 按照 Homebrew 页 面 上 的 安装 指引 进行 操作 。 具 体 来 说 ， 复 制 
页 面 中 心 给 出 的 代码 ， 打 开 Mac 上 的 终端 窗口 ， 将 复制 的 命令 粘贴 到 其 
中 ， 然 后 点 击 回 车 。 安 装 过 程 中 可 能 需要 输入 Mac 密 人 码 。 














(3) 不 要 关闭 终端 窗口 ， 在 接 下 来 的 步骤 中 我 们 还 会 用 到 它 。 


接 下 来 ， 使 用 新 安装 的 Homebrew 实 用 程序 来 安装 GLEW 和 GLEFW， 
如 下 。 


(1) 仍然 在 终端 提示 符 下 输入 命令 : brew install glfw3。 
(2) 仍然 在 终端 提示 符 下 输入 命令 : brew install glew. 


(3) 请 注意 ，/usr/local/include 路 径 下 现在 新 增 了 两 个 文件 玉 ， 分 
别名 为 GL 和 GLFW。 





接 下 来 我 们 安装 数学 库 GLM。 在 4 个 库 中 ， 它 的 安装 最 简单 。 由 于 
GLM 是 一 个 仅 包含 头 文 件 的 库 ， 因 此 只 需 : (a) 按照 前 面 附 录 A.1.5 节 





所 述 ， 下 载 和 解压 缩 库 ; Cb) 将 生成 的 “glm” 文 件 夹 及 其 内 容 复 制 
#1|/usr/local/include. 
安装 SOIL2 可 能 是 安装 4 个 库 中 最 棘手 的 。 我 们 兽 使 用 如 下 步骤 成 
(1) 下 载 Mac 版 本 的 SOIL2 和 premake。 


(2) 解压 缩 premake。 其 中 应 当 只 有 一 个 名 为 premake 的 可 执行 文 
件 。 


(3) 将 premake 可 执行 文件 复制 到 SOIL2 文 件 夹 中 。 
(4) 在 终 疹 窗口 中 ， 导 航 到 SOIL2 文 件 夹 并 输入 : 


./premake4 gmake 


(5) 仍然 在 SOIL2 文 件 夹 中 ， 输 入 cd make/macosx 以 导航 到 make 文 
件 夹 ， 然 后 键入 : 


make 


(6) SOIL2 的 构建 应 该 会 成 功 一 一 测试 文件 可 能 会 构建 失败 〈 没 
关系 ， 它 们 对 我 们 来 说 并 不 重要 ) 。 构 建 会 生成 “src/SOIL2” 文 件 夹 ， 其 
中 包含 几 个 .h 文 件 ， 以 及 一 个 了 ib” 文 件 夹 ， 文 件 夹 中 包含 一 个 名 
为 ibsoil2-debug.a” 的 库 文件 。 








(7) 将 包含 .h 文 件 的 SOIL2 文 件 夹 复制 到 /usr/local/include。 


(8) “libsoil2-debug.a” 文 件 可 以 放 在 任何 能 够 长 期 定位 的 位 置 。 
B.1.2 准备 开发 环境 


在 撰写 本 文 时 ，Mac 版 Visual Studio 2017 (在 Windows 平 台 上 运行 
本 书 程序 的 说 明 中 使 用 的 开发 环境 ) 不 支持 C++。 上 一 个 名 为 Visual 
Studio Code 的 相关 产品 可 以 用 来 开发 C++， 但 是 笠 好 Mac 上 面 有 个 更 常 
用 的 IDE Xcode。 如 果 你 的 Mac 没 有 安装 Xcode， 那 么 需要 先进 行 安 
装 ， 安 装 过程 简 单 而 直接 (虽然 速度 很 慢 ) [X518]。 你 可 能 需要 升级 操 
作 系 统 才能 安装 最 新 版 的 Xcode。 








安装 Xcode 之 后 ， 你 需要 配置 使 其 使 用 OpenGL 以 及 上 述 库 。 以 下 是 
我 们 为 C++/ OpenGL 应 用 程序 成 功 设置 Xcode 的 步 又 。 


/一 


(1) 运行 Xcode，“【〔 在 macOS 标 签 下 ) 创建 一 个 “command line 
tool”( 命 令 行 工 具 ) 类 型 的 项 目 。 将 语言 设置 为 C++。 





(2) 创建 一 个 默认 的 main.cpp， 它 包含 一 个 简单 的 “hello world” 程 
序 。 在 Xcode 编辑 器 中 ， 使 用 我 们 的 C++ / OpenGL 应 用 程序 中 的 所 需 
main.cpp{ iy mn ZARA - 


(3) 设置 头 文件 搜索 路 径 ， 如 下 所 示 。 
(a) 单 击 项 目 名 称 〔 位 于 最 左 侧面 板 的 顶部 ， 蔓 色 〉。 


(b) 选择 主 面板 顶部 中 心 的 “Build Settings”( 构 建设 置 ) 选 项 卡 。 


(c) 同 下 深 动 到 “Search Paths”( 搜 索 路 径 ) 部 分 ， 确 保 上 方 过 滤器 选 
择 “All”* 而 非 “Basic”。 


(d) 在 “Header Search Paths”( 头 文件 搜索 路 径 ) 中 ， 添 加 以 下 路 


径 : /usr/local/include. 


(4) 将 包含 "libsoil2-debug.a" 文 件 的 文件 夹 的 路 径 添加 到 “Library 
Search Paths”( 库 搜索 路 径 ) 。 它 也 位 于 “Build Settings” 中 ， 靠 近 上 一 步 
中 使 用 的 头 文件 搜索 路 径 部 分 。 


(5) 为 链接 阶段 设置 二 进 制 文件 ， 如 下 所 示 。 


(a) 如 有 必要 ， 单 击 项 目 名 称 〈 位 于 最 左 侧面 板 的 顶部 ， 蓝 
色 ) 。 


Cb) 选择 主 面板 顶部 中 心 的 “Build Phases” 选 项 卡 。 
Cc) 单 击 “Link Binary with Libraries” 劳 边 的 小 三 角形 打开 该 部 分 。 


(d) 在 “drag to reorder framework” FA MIZA — A+, 
i+” 3 


Ce) 这 里 应 该 打开 一 个 搜索 框 。 搜 索 “opengl”。 应 该 出 
现 *“OpenGL.framework”。 选 择 它 并 单 击 “添加 ”( 注 意 : 此 OpenGL 框 染 
己 存 在 于 Mac 中 ) 。 


(f) 再 次 单 击 “+”， 这 次 搜索 “core”。 应 该 出 现 “CoreFoundation 
Framework”。 选 择 它 并 单 击 “ 添 加 ”( 此 库 也 已 存在 于 Mac 中 ) 。 











(g) 再 次 单 击 “+”， 这 次 单 击 左下 方 的 *Add Other...” 


Ch) 浏览 窗口 打开 后 ， 按 下 CMD-SHIFT-G。 会 打开 一 个 输入 框 ; 
输入 /usr/local 并 单 击 “go”。 





G) 在 显示 的 文件 夹 结 构 中 ， 导 航 到 “Cellar*"”， 然 后 “glew”， 然 后 
导航 到 显示 的 版 本 号 为 名 的 文件 夹 中 ， 然 后 是 ib” 文 件 夹 。 其 中 库 文 件 
应 以 “.dylib” 扩 展 名 显示 。 








G) 选择 适当 的 “.dylib” 库 文件 。 它 应 该 命名 为 : 
libGLEW.2.1.0.dylib〈 没 有 “mx”， 也 没有 快捷 方式 箭头 ) 。 选 择 后 ， 单 
击 “Open” 将 其 插入 。 

Ck) 对 glfw 库 重复 步 又 g~~j。 它 也 在 /usr/local/Cellar 中 ， 然 后 


在 “glfw” 中 ， 它 的 版 本 号 对 应 文件 夹 下 的 ib” 文 件 夹 中 。 所 需 引 用 的 库 
名 为 libglfw.3.2.dylib 〈 没 有 快捷 方式 箭头 ) 。 单 击 “Open” 将 其 插入 。 








d) 对 SOIL2 库 文件 〈 我 们 在 B.1.1 小 节 中 创建 的 文件 ) 重复 该 过 
程 。 即 ， 单 击 “+”， 单 击 “Add Other.….”， 然 后 导航 到 放置 libsoil2-debug.a 
文件 所 在 的 文件 夹 中 。 选 择 该 文件 ， 然 后 单 击 “Open” 将 其 插入 。 


(6) 设置 工作 目录 ， 如 下 所 示 : Hii Produc Hi) “Edit 
Scheme”， 选 中 标记 为 “use custom working directory” 的 复 选 框 
(Xcode10.2.1 中 ， 在 option 选 项 卡 中 ) 。 在 下 方 的 输入 框 中 ， 将 项 目 源 
代码 文件 夹 路 径 复 制 进去 〈 包 含 “main.cpp” 文 件 的 文件 夹 ) 。 


(7) 将 支持 文件 〈 纹 理 图 像 、 着 色 器 文件 和 其 他 支持 文件 ， 例 如 
我 们 在 本 书 中 生成 的 Utils.cpp 和 Utils.h 文 件 ) 复制 到 “main.cpp” 所 在 的 同 
一 工作 目录 中 。 


(8) 在 最 左边 的 面板 中 ， 将 属于 C++ /OpenGL 应 用 程序 (例如 
Utils.cpp, Utils.h, Sphere.cpp 等 ) 的 任何 其 他 “.cpp” 和 “.h” 文 件 添加 到 
项 目 中 ， 使 它们 出 现在 “main.cpp” 旁 边 的 左 侧 面板 中 。 


B.2 修改 Mac 的 C+t+ / OpenGL /GLSL 应 用 程序 
代码 





本 书 中 描述 的 C++ 程序 中 的 大 部 分 代码 可 以 直接 运行 。 但 是 ， 需 要 
先 对 少 部 分 代码 进行 少量 修改 。 大 多 数 更 改 在 “main.cpp” 中 的 “main(” 函 
数 中 。 你 可 以 进行 一 次 修改 ， 并 将 修改 后 的 main0 函 数 复制 到 其 他 所 有 
项 目 中 。 其 余部 分 的 更 改 很 小 ， 可 以 根据 需要 进行 。 








这 部 分 描述 的 变化 在 研究 书 中 相应 的 编程 部 分 之 前 ， 没 有 太 大 意 
义 。 读 者 可 以 选择 跳 过 本 节 的 部 分 内 容 ， 并 在 学 习 相 关 材 料 后 再 回来 对 
照 进行 修改 。 昌 然 可 能 存在 引起 混 消 的 风险 ， 但 我 们 仍然 决定 在 此 处 对 
Macintosh(macOS) 平 台所 有 代码 进行 更 改 ， 以 便 将 它们 放 在 同一 个 地 
Ti 








B.2.1 修改 C++ 代码 


让 我 们 从 对 “main.cpp” 文 件 必 需 的 修改 开始 。 


。 Xcode 有 时 会 生成 大 量 的 “documentation” 警 告 消 息 。 这 会 使 找到 更 
实质 性 的 错误 消息 变 得 更 复杂 。 有 几 种 方法 可 以 阻止 这 些 消息 ， 最 
简单 的 一 种 是 将 以 下 两 行 代 码 添加 到 “main.cpp” 的 顶部 : 














#pragma clang diagnostic push 





#pragma clang diagnostic ignored “-Wdocumentation” 








e Homebrew 将 GLEW 安 装 为 Mac 上 的 静态 库 ， 因 此 需要 在 程序 顶部 ， 
#include <GL/glew.h> 命 令 的 正 上 方 添加 代码 : 


#define GLEW_STATIC 


。 在 glffwWindowHint 命 令 中 ， 将 “major”* 上 下 文 版 本 设置 为 4， 
将 “minor” 设 置 为 1。 你 需要 紧 跟 着 现 有 的 两 个 glffwWindowHint 命 
令 ， 添 加 另外 两 个 glfwWindowHint 命 令 


glfwwindowHint(GLFN_OPENGL_PROFILE，GLFN_OPENGL_CORE_PROFILE); 


glfwWindowHint(GLFW OPENGL FORWARD COMPAT, GL_TRUE); 








需要 这 些 命令 是 因为 很 多 Mac 默 认 使 用 更 老 的 OpenGL。 这 些 指 令 
会 强制 使 用 硬件 能 够 文 持 的 最 新 OpenGL 版 本 。 





© 某 些 Mac《〈 例 如 具有 视网膜 显示 屏 的 Mac) 在 设置 GLFW 泻 染 窗 口 
分 辨 率 时 ， 稍 微 复杂 一 些 。 使 用 glfwCreateWwWindowO 创 建 窗 口 后 ， 
尔 需要 从 帧 缓冲 区 中 检索 实际 的 屏幕 尺寸 ， 如 下 所 示 : 


a 


int actualScreenWidth, actualScreenHeight ; 


glfwGetFramebufferSize(window, &actualScreenWidth, &actualScreenHeig 


ht); 





接 下 来 ， 在 glfwMakeContextCurrent(window) 指 令 后 ， 添 加 如 
下 代码 : 


glViewport(@,0@,actualScreenWidth, actualScreenHeight) ; 


这 将 确保 绘制 到 帧 缓冲 区 的 内 容 与 GLFW 窗 口中 显示 的 内 容 相 
配 。 
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e 最 后 ， 在 使 用 glewInit() 初 始 化 GLEW 之 前 ， 添 加 如 下 代码 : 


glewExperimental = GL_TRUE; 


B.2.2 ”修改 GLSL 代 码 


由 于 Mac 中 使 用 稍 早 版 本 的 OpenGL (V4.1) ， 因 此 需要 对 我 们 的 
GLSL 着 色 器 代码 〈 以 及 一 些 相关 的 C++/OpenGEL 人 代码) 中 的 不 同位 置 进 
行 一 些 修改 : 


。 必 须 修改 着 色 器 中 指定 的 版 本 号 。 假 设 你 的 Mac 支 持 4.1 版 ， 则 在 每 
个 着 色 器 的 顶部 找到 如 下 代码 ; 


#version 430 


必须 将 其 修改 为 : 


#version 410 


© 4.1K AS HJ OpenGI As 52 FF CEE AE ie 2S E A JB EIR KE FT 2 RE 





影响 从 第 5 章 开始 的 内 容 。 你 需要 删除 布局 绑 定 限定 符 ， 并 将 其 答 
换 为 男 一 个 完成 相同 操作 的 命令 。 具 体 来 说 ， 在 着 色 器 中 查找 具有 
以 下 格式 的 行 : 


layout (binding=@) uniform sampler2D samp; 


绑 定 子 句 中 指定 的 纹理 单元 号 可 能 不 同 〈 此 处 为 "0") , FAR 
器 变量 的 名 称 可 能 不 同 〈 此 处 为 samp”) 。 在 任何 情况 下 ， 你 都 需 
要 删除 布局 子 句 ， 将 它 简化 为 ; 


uniform sampler2D samp; 


然后 ， 你 需要 在 C++ 程序 中 为 后 用 的 每 个 纹理 添加 如 下 代码 : 











glUniformli(glGetUniformLocation(renderingProgram,“samp”), ©); 





g 


这 些 代码 需要 紧 跟 在 C++ display) K ACF H glBindTexture() fii Z 
后 ， 其 中 “samp” 是 统一 采样 器 变量 的 名 称 ,，“0? 是 先前 删除 的 绑 定 
命令 中 指定 的 纹理 单元 。 


B.2.3 ”补充 说 明 


。 路 径 名 分 隔 符 有 时 在 本 书 中 列 为 >”。 对 于 Mac， 可 能 需要 将 这 些 更 
改 为 “/”。 例 如 : 


#include <GL\glew.h> 


可 能 需要 更 改 为 : 


#include <GL/glew.h> 


e Macintosh (macOS) 必须 支持 OpenGL 4.1 版 才能 运行 本 书 中 的 程 
序 。 如 果 你 不 知道 机 器 支持 的 OpenGL 版 本 ， 可 查阅 苹果 网 站 上 提 
供 的 列表 181 
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附录 C 使 用 Nsight 图 形 调试 器 


调试 GLSL 着 色 器 代码 非常 困难 。 与 一 般 编 程 语言 《如 C++ 或 Java ) 
中 编程 不 同 ， 在 着 色 器 编程 中 ， 经 常 无 法 确定 发 生 错误 的 确切 位 置 。 通 
常 ， 着 色 器 错误 的 表现 只 是 白 屏 ， 而 不 提供 有 关 错 误 性 质 的 线索 。 更 令 
人 泪 丧 的 是 ， 在 运行 期 间 无 法 打印 着 色 器 变量 的 值 ， 就 像 平 时 定位 没有 
头绪 的 bug 那 样 。 








我 们 在 2.2 节 列 出 了 一 些 检测 OpenGL 和 GLSL 错 误 的 技术 。 尽 管 这 
些 技 术 提 供 了 一 定 的 帮助 ， 但 缺乏 显示 着 色 器 变量 值 这 样 的 基础 功能 是 
一 个 严重 的 障碍 。 











出 于 这 个 原因 ， 显 卡 制造 商 有 时 会 在 硬件 中 提供 相关 功能 ， 使 得 可 
以 在 着 色 器 运行 时 从 其 中 提取 信息 ， 并 提供 带 图 形 界面 的 调试 器 以 访问 
这 些 信 息 的 工具 。 每 个 制造 商 的 调试 工具 仅 适 用 于 该 厂商 的 显卡 。 
NVIDIA 的 图 形 调 试 器 是 Nsight 工 具 套 件 中 的 一 部 分 ，AMD 也 有 类 似 的 
工具 套件 ， 名 为 CodeXL。 本 附录 介绍 如 何 使 用 Nsight。 








C.1 关于 NVIDIANsight 


Nsight 是 NVIDIA 的 一 套 包 含 图 形 调 试 器 的 工具 套件 ， 它 可 以 在 程 
序 运 行 时 查看 OpenGL 图 形 管道 的 各 个 阶段 ， 包 括 着 色 器 。 使 用 Nsight 不 
需要 更 改 或 添加 任何 代码 ， 只 要 在 启用 Nsight 的 情况 下 运行 现 有 程序 
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容 。 


Nsight 有 适用 于 Windows 和 Linux / MacOS 的 版 本 ， 包 括 在 微软 的 
Visual Studio (VS) 和 Eclipse IDE 下 运行 的 版 本 。 我 们 将 讨论 限制 在 基 
于 Windows 平 台 、Visual Studio 版 本 的 Nsight。 《在 本 书 的 Java 版 中 ， 我 
们 描述 了 如 何在 Java 程 序 中 使 用 VS 版 本 的 Nsight。 


Nsight 仅 适用 于 兼容 的 NVIDIA 显 卡 ， 而 不 适用 于 Intel 或 AMD 显 
卡 。NVIDIA 网 站 [NS18] 提 供 了 所 支持 显卡 的 完整 列表 。 





C.2 设置 Nsight 


设置 Nsight 的 过 程 简 单 得 出 奇 。 以 下 步 又 基于 Nsight 版 本 5.3。 


(1) 如 果 尚 未 安装 Visual Studio(VS)， 请 安装 ， 例 如 Visual Studio 
2017 社 区 版 。 请 确保 安装 组 件 中 包含 C++ 核心 编译 器 。 请 注意 ，Visual 
Studio 安 装 可 能 非常 慢 。Visual Studio 2017 可 在 官网 上 找到 。 


附录 A 中 给 出 了 安装 Visual Studio 的 详细 步骤 。 


(2) 安装 NVIDIA Nsight，Visual Studio Edition。 这 应 该 比 在 步骤 1 
中 安装 Visual Studio 的 速度 快 。 安 装 时 ， 不 需要 CUDA 元 素 〈 除 非 你 出 
于 其 他 原因 需要 它们 ) 。 


(3) 运行 Visual Studio， 并 确保 Nsight 于 单 显 示 在 菜单 栏 的 顶部 。 


(4) 如 果 尚 未 加 载 要 运行 的 程序 ， 请 加 载 该 程序 。 附 录 A 给 出 了 
配置 C++ /OpenGEL 项 目的 步骤 。 


C.3 在 Nsight 中 运行 C++/OpenGEL 应 用 程序 


(1) 在 “Nsight” 沫 单 下 〈 沿 顶部 菜单 栏 ) ， 选 择 “Start Graphics 
Debugging”， 如 图 C.1 所 示 。 
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图 C.1 选择 “Start Graphics Debugging” 





(2) 单 击 后 ， 将 弹出 一 个 窗口 ， 询 问 您 是 否 要 “connect without 
security? ”( 无 安全 地 连接 ? ) , fA “Connect nal (不 安全 连 
接 ) 。 这 将 会 启动 Ct+ /OpenGL 图 形 程序 。 你 将 会 看 到 终端 窗口 和 正在 
运行 的 程序 。Nsight 可 能 会 在 运行 的 程序 中 登 加 一 些 信息 ， 如 图 C.2 所 
示 。 
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Histogram: prins per draw 








util = Utits(); 
float cameraX, cameraY, camera 
t rendering_program; 
vao[numVAOs ]; 
vbo[numvB0s ]; 


variable allocation for disf 
t mv_loc, proj_loc; 
int width, height, displayLoopi 
float aspect; 
double tf; 


glm::mat4 pMat, vMat, tMat, rMa 


void setupVertices(void) 
r 








图 C.2 ”启动 C++ /OpenGL 图 形 程序 





(3) 当 程 序 开始 运行 后 ， 与 任意 希望 检查 的 部 分 互动 ， 之 后 ， 在 
Nsight 荣 单 中 ， 单 击 “*Pause and Capture Frame”( 和 暂停 并 捕获 当前 帧 ) ， 
如 图 C.3 所 示 。 
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图 C.3 ”暂停 并 捕获 当前 帧 


(4) 接 下 来 帧 调试 器 界面 会 出 现 ， 同 时 出 现 的 还 有 一 个 HUD 工 具 
栏 和 称 为 “scrubber” 的 水 平 选择 工具 。 此 程序 在 这 里 应 该 会 暂停 。 在 调 
试 器 屏 磊 的 核心 是 左边 的 工具 栏 ， 其 中 有 每 个 着 色 器 阶段 对 应 的 按钮 。 
例如 ， 你 可 以 单 击 高 亮 5VS”( 顶 点 着 色 器 ) ， 之 后 在 右 侧 的 界面 中 ， 你 
可 以 癌 下 滚动 并 得 看 统一 变量 的 内 容 《〈 假 设 你 在 上 方 选 择 了 “API 
inspector”，API 检 查 器 ) 。 在 图 C.4 中 ,“mv_matrix" 右 侧 的 小 方 框 已 打 
开 ， 显 示 4x4 MV 矩阵 的 内 容 。 
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oy 
a 2 
© Scaling: EventID 
一 EventID 0 5 00 
All Events I I 
XFB Render Target .. a 
Raster Add... 国 
FS 
Pix Ops 4 
FB 
v Program Interfaces 
q7 Uniform 
Textures eer 
Name Location mi 
Images mv_matrix Default: Qe -0,354253, 0.681405, 0... } GL_FLOAT_MAT4 1 -1 -1 0 
Buffers aA proj_matrix Default:1 (¥J{ 1.73205, 0,0,0...} GL_FLOAT_MAT4 1 -1 -1 0 
Program 


图 C.4 ”显示 4x4 MV 和 矩阵 











(5) 出 现 的 另 一 个 有 趣 的 窗口 看 起 来 类 似 于 正在 运行 的 程序 。 此 
窗口 确 部 有 一 个 时 间 轴 ， 你 可 以 单 击 并 碍 看 当前 帧 中 绘制 的 项 目的 顺 
序 。 图 C.5 是 一 个 示例 一 一 注意 在 时 间 轴 的 左 侧 区 域 单 击 光 标 ， 窗 口中 
显示 了 那些 到 该 时 间 点 为 止 已 经 绘制 出 的 项 目 。 
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图 C.5 ”当前 帧 中 绘制 的 项 目 顺序 








有 关 如 何 充分 利用 Nsight 工 具 的 详细 信息 ， 请 参阅 Nsight 文 档 。 
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